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

【问题标题】：State not updating on view layer after it is updated in store mutation -- Vuex在存储突变中更新视图层后，状态未在视图层上更新——Vuex
【发布时间】：2020-02-20 06:21:29
【问题描述】：

我正在使用 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 []

如您所见，虽然 store 更新了 practices 的值，但在组件内并没有改变。

有人对可能出现的问题有任何想法吗？

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

您使用的方法不正确。

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

【讨论】：