Vuex commit не обновляет состояние

Question

Я создаю приложение для языковых карточек и у меня возникают проблемы с обновлением состояния при переключении списков.Итак, я вижу, что в моем магазине мутации запускаются, но в моем Vuex Dev Tools состояние не регистрирует изменение, несмотря на некоторое обновление vue ...

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Компоненты

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 Мутации

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: [],
...

Answer 1

Для того, чтобы изменения вступили в силу, вы не можете напрямую назначать значения. Вам нужно будет использовать Vue.set (если необходимо обновить значение определенного атрибута / индекса) или Object.assign (если обновляется полный объект). Узнайте больше о реактивности vue здесь .

Вам нужно будет сделать то же самое в мутации, чтобы изменения вступили в силу.

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

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

Answer 2

Вы добавили getters в свой объект магазина Vuex?store.getters.showModal, store.getters.currentListWords и т. Д. Если нет, используйте mapState вместо mapGetters для доступа к простому состоянию.