Question

我的问题是，“ 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”时，数组始终为空。

请帮助！：-）

Answer 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是非常丑陋的。您将编写更易于维护的代码。

Answer 2

尝试替换此：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="user" pattern="whatever pattern" title="wrong value" required>

<input id="inputEnviar" type="button" value="Send">

与此：

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

参考：article

Vuex状态-数组为空

2 个答案: