Vuex 提交不更新状态

Posted 2023-02-22

【中文标题】Vuex 提交不更新状态

【英文标题】：Vuex commit not updating state

【发布时间】：2019-08-08 11:01:21

【问题描述】：

我正在创建一个语言抽认卡应用程序，但在切换列表时遇到了状态更新问题。所以我看到在我的商店中，突变被触发了，但在我的 Vuex 开发工具中，尽管 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 存储突变

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

JS 吸气剂

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

商店

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

【问题讨论】：

state.currentList 是一个对象吗？如果是这样，那么您将不得不使用 Vue.set 或 Object.assign

它是一个数组中的对象...

你描述了你在初始 vuex 状态下的属性吗？ state: () => ( currentList: [], tempList: [] ) 另外我认为您的属性名称有误

【参考方案1】：

为了使更改具有反应性，您不能直接分配值。您将需要使用 Vue.set（如果要更新特定属性/索引的值）或 Object.assign（如果要更新完整对象）。详细了解 vue 反应性here。

您必须在突变中执行以下操作以使您的更改具有反应性。

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

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

【参考方案2】：

您是否在 Vuex 存储对象中添加了getters？ store.getters.showModal、store.getters.currentListWords 等。如果没有，请使用 mapState 而不是 mapGetters 来访问普通状态。

【讨论】：

对不起，我忘了添加那部分。我做到了。让我现在编辑！