Home » vue » Error in render Vuex

Error in render Vuex

Posted by: admin November 26, 2021 Leave a comment


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


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:

    //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