State not updating on view layer after it is updated in store mutation — Vuex

Question

I'm using a Vuex mutation to change the value of an array called practices. I call this mutation in a component called PracticeTree, which includes a getter for practices.

 handleNodeClick(data, other) {
     this.expanded=data.namespace
     this.SET_PRACTICES(data.practices)
     console.log('practices as set in view layer: ')
     console.log(this.practices)
 },

The mutation that is called looks like:

SET_PRACTICES(state, data){
    Vue.set(state.practices, data)
    console.log('practices as set in the store:' )
    console.log(state.practices)
},

I am using Vue.set instead of simply changing the state because I thought it might help when I saw that the state wasn't changing on the view layer - but it didn't.

Here is the output of the above functions:

practices as set in the store:
store.js?0571:100 (3) [{…}, {…}, {…}, "": (...), __ob__: Observer]
PracticeTree.vue?f108:95 practices as set in view layer: 
PracticeTree.vue?f108:96 []

As you can see, although the store updates the value of practices, it doesn't change within the component.

Does anyone have any ideas as to what may be going wrong?

Borjante Borjante · Accepted Answer · 2020-02-20T14:38:35

You are using the method incorrectly.

enter link description here

SET_PRACTICES(state, data){
    Vue.set(state, 'practices', data)
    console.log('practices as set in the store:' )
    console.log(state.practices)
}

State not updating on view layer after it is updated in store mutation — Vuex

1 Answers