在视图层在存储突变中更新后，状态未在视图层上更新--Vuex

Question

我正在使用Vuex突变来更改一个名为practices的数组的值。我将这种突变称为PracticeTree组件，其中包括practices的getter。

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

所谓的突变看起来像：

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

我使用Vue.set而不是简单地更改状态，因为当我看到视图层上的状态没有更改时，我认为这可能会有所帮助，但事实并非如此。

以下是上述功能的输出：

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 []

正如您所看到的，尽管存储会更新practices的值，但它在组件内不会更改。

有人知道可能出了什么问题吗？

Answer 1

您使用的方法不正确。

在此处输入链接描述

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