Vuex 状态 - 数组为空答案

【问题标题】：Vuex State - Array emptyVuex 状态 - 数组为空
【发布时间】：2019-04-07 12:46:08
【问题描述】：

我的问题是，“store.js”中的状态变量“genreRankings”永远不会更新。谁能告诉我为什么？

我正在通过我的组件访问商店，如下所示：

saveMovie (item) {
  this.$store.dispatch('addMovie', item).then(x => {
    console.log(this.$store.state.savedMovies)
    this.$store.commit('update_genreRankings', Util.getGenreRankings(this.$store.getters.savedMovies))
  })
},

removeMovie (item) {
  this.$store.dispatch('removeMovie', item).then(x => {
    this.$store.commit('update_genreRankings', Util.getGenreRankings(this.$store.getters.savedMovies))
  })
},

这里是 store.js (https://gist.github.com/oaltena/ccc70c06c29a1d9af6aa3234aba79518) 和 Util.js (https://gist.github.com/oaltena/67b8431199e9a6d74681c04d9183e630)。

当我通过 VueDevTools 访问“genreRankings”时，数组始终为空。

请帮忙！ :-)

【问题讨论】：

附加信息：“savedMovies”不是空的，而是用本地存储的测试数据填充的。
有没有运气解决这个问题？我也有类似的问题。

标签： vue.js state vuex

【解决方案1】：

尝试用新数组“替换”状态：

 state.savedMovies = state.savedMovies.concat(object)

正如 Vuex 文档中所写，Vuex 存储的状态与组件中的状态遵循相同的规则：https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules

PS：直接从组件中调用突变非常难看，使用 mapActions 在组件中映射您的操作，然后从操作中调用commit。您将编写更易于维护的代码。

【讨论】：

【解决方案2】：

尝试替换这个：

update_genreRankings (state, object) {
  state.genreRankings = object
}

用这个：

update_genreRankings (state, object) {
  Vue.set(state, 'genreRankings', object)
}

参考：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

【讨论】：