Vuex State - массив пустой

Question

Моя проблема в том, что переменная состояния "genreRankings" в "store.js" никогда не обновляется. Может кто-нибудь сказать мне, почему?

Я получаю доступ к магазину через мой компонент следующим образом:

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

)

Когда я обращаюсь к "genreRankings" через VueDevTools, массив всегда пуст.

Помогите, пожалуйста! : -)

Answer 1

Попробуйте заменить это:

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

Answer 2

Попробуйте "заменить" состояние новым массивом:

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

Как написано в документации Vuex, состояние хранилища Vuex соответствует тем же правилам, что и состояние в компонентах: https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules

PS: довольно уродливо вызывать мутации непосредственно из компонентов, использовать mapActions для сопоставления ваших действий в ваших компонентах, а затем вызывать commit из действия. Вы сделаете более понятный код.