Home » vue » Error in render Vuex

Error in render Vuex

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am currently setting up a project with Vuex and Vue, but am encountering an odd issue. I am speculating that it has to do with the order of render, but after several attempts to alter the code to no avail, I am still not sure.

What I tried is to access the state with getters in the parent and pass it with a slot, instead of directly in the child, as it should be and as I will post here.

I tried passing the value with $this.$store.state is still undefined, but upon console logging it with a method on the instance, all of the data is there.

Here is a link to my code.

The error there is similar to the one in my own console:

[Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"

Thanks in advance to anyone who would take the time to look at it.

P.S: Upon changing it to store.state.stake.value the content displays but another error appears which is [Vue warn]: Invalid handler for event "click": got undefined

Answers:

emphasized textIn your mutations, you are accessing the state using this.$store.state. This is wrong as this does not point to the vue instance.

The mutation handler receives the state as the first argument:

myMutation(state){
    //use state argumentt to access state
}

Here is the updated code sandbox

One more thing: mapMutations is a helper which maps component methods to store.commit calls. So they are just methods in the component Add it to methods option not the computed as they are not computing anything

###

Pass state as an argument in your mutations’ functions like this:

increment(state) { 
  state.stake.value += 1;
},

You don’t need to do this.$store in your store. Only in your vue components