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?

Answer 1

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)
}