Received a TypeError in Nuxt store mutation handling

I have created a basic store in my store/index.js file with the following structure:

export const state = () => ({
    isDark: false,
});

export const mutations = {
    setIsDark(state, payload) {
        state.isDark = payload;
    },
};

export const getters = {
    getIsDark(state) {
        return state.isDark;
    },
};

Although I am able to access the value of isDark in my component, I encounter an error when trying to call the setIsDark method:

TypeError: Cannot read property 'setIsDark' of undefined

Here is how my component is structured:

computed: {
    isDark() {
        return this.$store.getters.getIsDark;
    },
},

methods: {
    toggleIsDark() {
        this.$store.mutations.setIsDark(!this.isDark);
    },
},

Can anyone point out what might be causing this issue?

Answer №1

When calling a mutation, the syntax to use is:

this.$store.commit('setIsDark', !this.isDark);

As for an action, it would be:

this.$store.dispatch('setIsDark', !this.isDark);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some ways to maintain code efficiency when working with AJAX requests?

Looking at the code below, I am making two identical Ajax requests with only one line of difference. Is there a way to consolidate this into a function to maintain DRY (Don't Repeat Yourself) code? $('.searchable').multiSelect({ selecta ...

Add the current date plus 48 hours to the content on a webpage (JavaScript maybe?)

Hello there, I am currently in the process of setting up a small online store for a farm using Squarespace. One thing I would like to implement is specifying that items will be available for pickup two days after they are purchased online, instead of imme ...

Implementing a click event for dynamically added elements in JavaScript/jQuery using a loop

I am facing an issue where the number of $('input[name=isDefault]').length is 2, but the each function only runs once. $(saveProduct).click(function (e) { $('input[name=isDefault]').each(function (index) { var that = this; ...

Tips for incorporating my withStyles classes into the export class component within my React application

I'm having difficulty applying styles to my React form. I'm utilizing withStyles from Material UI. Unfortunately, the styles aren't being applied. I tested the code in my initial <DialogContentText> but it's not having any effect ...

An issue has occurred with the axios get request link when trying to access it through a click

When using axios in vue.js with Laravel, I am encountering an issue where the URL is incorrect in the console. Instead of http://{mylink}/messages/getMessages1, I need it to be http://{mylink}/messages/getMessages/1. The method in my file.js is as follows ...

Troubles with showcasing user attributes in the view with ng-repeat and handle-bars in Angular.js

React.js, Express.js, MongoDB server.js: const express = require('express'); const mongoose = require('mongoose'); const bodyParser = require('body-parser'); const routes = require('./routes/index'); const users = ...

Turning Typescript into Javascript - the How-To Guide

Currently following Shopify's Node Api tutorial to implement a Redis store in my project. The tutorial provides code in typescript, but my entire project is in javascript (React/nextjs). I've been struggling to convert the code to javascript for ...

Disrupting methods on a dependency within QUnit can cause tests against that dependency to fail

Currently, in my Google Apps Script project, I am unit-testing an application using QUnit for test-driven development purposes. Code Under Test The function I am currently focusing on testing and developing is the creation of a Sheet from a long string o ...

What could be causing my JavaScript pricing calculator to malfunction?

I've been struggling to make the script below work, but I can't seem to figure out why. It should be functioning properly. Even though all variables are in place, no price is appearing? You can view the HTML on this page: var cake_prices = n ...

React component not consistently returning correct results due to undefined values being included

Currently, I have a function that iterates through one array, comparing its values with those in another array. When it finds a match, it adds the matching results to a new array called addToState. These matches are then concatenated with the original arra ...

Is it possible to interact with a particular point or element within a canvas using languages like javascript, jquery, or selenium?

I am trying to figure out how to simulate a click at a specific position within a canvas. I have tried using coordinates, but so far haven't found a way to make it work. Any other suggestions would be greatly appreciated. It's important to note t ...

Error in TypeScript when using Vue/Nuxt.js: The property 'latitude' is not found in the type '(() => any) | ComputedOptions<any>'

As a newcomer to Vue.js, I am currently utilizing it with Typescript on a Nuxt.js (v2.15.8) application. The code snippet provided below is functioning correctly: export default Vue.extend({ name: 'MyComponent', ...

How does the URL play a role in asynchronous functions when it comes to web scraping?

Currently, I am diving into web scraping and encountered a scenario that has left me puzzled regarding the arrow key function. I am struggling to comprehend why the URL is used twice and how it actually functions. Although I recognize this involves advance ...

Stopping the webdriver in Node.js gracefully without crashing it can be achieved through a

Can the selenium webdriver be halted without terminating node? I've encountered a problem attempting to create an API tool that conducts web automation upon receiving a get request. Essentially, I am executing the selenium webdriver on a get request ...

Managing Errors with yEnc in Node.js

Currently, I am utilizing the yEnc module in combination with Node.js. I have been grappling with the challenge of implementing error handling since the module lacks an err token. How can error handling be achieved? Outlined below is the code that I hav ...

`problem encountered when attempting to sanitize HTML through the npm package known as "sanitize-html"`

After researching the documentation, I attempted to use this code snippet: const dirty = '<div>Content</div>'; const clean = sanitizeHtml(dirty); The desired result of 'clean' should be "Content", however it seems that &apo ...

Fire an event following the execution of $state.go()

Is there a way to activate an event once the state has been modified in ui.router? Specifically, I am utilizing the ionic framework alongside angularJS which incorporates angular-ui-router. Note: Below is the pseudo code I am hoping to implement. $state. ...

Adjust the placement of an object within cannon.js based on its local orientation

I am trying to move a body in cannon.js with a quaternion rotation by 100 units along a vector relative to its local rotation. However, I'm facing a problem with the positioning. For example: let body = new CANNON.Body({ mass: 0 }); body.quaternion. ...

Strikeout list on click of a mouse

Is there a way to apply strikethrough formatting to text with just a mouse click? The CSS for lists is beyond the form field margin. I've tried multiple methods without success. No matter how many times I change the code, I can't seem to get it r ...

Skybox images failing to display

Learning THREE.js has been quite challenging for me, especially when trying to display a simple skybox. Despite attempting various strategies, I have not been successful due to insufficient documentation and multiple releases. This struggle has left me fee ...