0

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

Alete
  • 49
  • 5

2 Answers2

2

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

Vamsi Krishna
  • 30,568
  • 8
  • 70
  • 78
  • I tried with state.stake.value prior to trying with this.$store, but it still didn't happen to work. With store.state.stake.value there is another error - [Vue warn]: Invalid handler for event "click": got undefined P.S: The link with the updated sandbox does not seem to work, may you kindly resend it – Alete Jul 23 '18 at 08:42
  • On codesandbox it seems to work, but in my own application locally, even after all suggestions followed, it still get `[Vue warn]: Error in render: "TypeError: Cannot read property 'stake' of undefined"` And if I use store.state in the index.js file, it seems to work, but with state.stake.value only it resolves to undefined. I set it to store.state.stake.value and when I do so, and pass the store as an argument for the function, so that I don't get an error for the event, it says that it can't read property stake of undefined.... – Alete Jul 23 '18 at 09:08
0

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

LJD
  • 498
  • 4
  • 11
  • Yup, I know, but it didn't work with simply state.stake.value this is why I tried it as an alternative – Alete Jul 23 '18 at 08:43
  • pass state as an argument in your function increment. in your example code there is nothing in the parenthesis after 'increment' when state should be inside, just like it is in the arrow function in the getters. in the getters stakeValue: state => {} the state before the => is the argument in the function. do the same for increment and decrement and it should work – LJD Jul 23 '18 at 08:51
  • On codesandbox it seems to work, but in my own application locally, even after all suggestions followed, it still get [Vue warn]: Error in render: "TypeError: Cannot read property 'stake' of undefined" And if I use store.state in the index.js file, it seems to work, but with state.stake.value only it resolves to undefined. I set it to store.state.stake.value and when I do so, and pass the store or the state as an argument for the function, so that I don't get an error for the event, it says that it can't read property stake of undefined. – Alete Jul 23 '18 at 09:09