Vuex commit not updating state

Question

I am creating a language flashcard app and am having issues with the state updating when I switch lists. So I see that in my store the mutations are being fired but in my Vuex Dev Tools the state is not registering a change despite the vue updating somewhat...

HTML

<label style="margin-left: 5px">Word List</label>
<md-select id="list-select" v-model="currentList">
   <md-option v-for="(list, index) in wordLists" :key="index" :value="list.id">
       {{list.name}}
   </md-option>
</md-select>

JS Component

import {mapGetters} from 'vuex';

...

computed: {
  ...mapGetters({
     showModalState: 'showModal',
     computedList: 'currentListWords',
     wordLists: 'wordLists'
  }),

...

watch: {
  currentList(val) {
     let list = this.wordLists.filter((v) => v.id === val).slice();

      this.$store.commit("setCurrentList", list);
      this.$store.commit("setTempList", list);
  }

...

JS Store Mutations

setCurrentList(state, payload){
  state.currentList = payload;
},
setTempList(state, payload){
  state.tempList = payload;
},

JS Getters

wordLists(state){
  return state.wordList;
},
currentList(state){
  return state.currentList;
},

STORE

...
currentList: [],
wordLists: [],
...

Is state.currentList an object?? Id so then you will have to use Vue.set or Object.assign — Riddhi
Did you describe your properties in initial vuex state? { state: () => ({ currentList: [], tempList: [] }) } Also i think you have mistake in properties name — Alexandr Vysotsky

Riddhi Riddhi · Accepted Answer · 2019-03-18T06:15:22

For making the changes reactive you cannot directly assign the values. You will need to use Vue.set(If value of particular attribute/index is to be updated) or Object.assign (if complete object is being updated). Learn more about vue reactivity here.

You will have to do as below in mutation to make your changes reactive.

state.currentList = Object.assign({}, state.currentList, payload)

state.tempList = Object.assign({}, state.tempList, payload)

Vuex commit not updating state

2 Answers