Vuex State - Array empty

Question

My Problem is, that the state-variable "genreRankings" in "store.js" is never updating. Can somebody tell me why?

I'm accessing the Store via my Component as follows:

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

Here is store.js (https://gist.github.com/oaltena/ccc70c06c29a1d9af6aa3234aba79518) and Util.js (https://gist.github.com/oaltena/67b8431199e9a6d74681c04d9183e630).

When i access the "genreRankings" via VueDevTools the array is always empty.

Help, please! :-)

Additional Info: "savedMovies" is not empty but filled with test data from the localstorage. — Oliver Altena
– Oliver Altena, Commented Nov 3, 2018 at 15:43
Had any luck solving this problem? I'm having a similar issue. — Danoctum
– Danoctum, Commented Nov 16, 2018 at 18:03

SylvainAr · Accepted Answer · 2018-11-03 16:11:02Z

2

Try "replacing" the state with a new array :

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

As written in the Vuex documentation, the state of Vuex store follows the same rules as the state in the components : https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules

PS: it's pretty ugly to call mutations directly from the components, use mapActions to map your actions in your components, then call commit from the action. You'll make a more maintenable code.

answered Nov 3, 2018 at 16:11

SylvainAr

1546 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 00:31:35Z

0

Try replacing this:

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

with this:

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

Reference: https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

edited Jul 15, 2022 at 0:31

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 4, 2018 at 22:03

Dragos-Paul Pop

161 bronze badge

Collectives™ on Stack Overflow

Vuex State - Array empty

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related