不改变 Vuex 商店中的模块状态。 Vuex

【问题标题】：Not mutate module state in the Vuex store. Vuex | Vue不改变 Vuex 商店中的模块状态。 Vuex | Vue
【发布时间】：2021-04-10 11:20:55
【问题描述】：

我正在探索 vuex 模块功能，但我不知道我做错了什么。

我有一个带有一个模块的简单 vuex 商店。

模块包含一个状态和变异选项，这里只是在模块状态中添加一个新项目。

当我尝试调用突变函数时，它不起作用。

代码沙盒 => https://codesandbox.io/s/currying-fire-2p3eq?file=/src/App.vue

【问题讨论】：

【解决方案1】：

你必须从动作中调用

const addTheme = ({ commit }, { description }) => {
 commit(SET_NEW_ITEM, {
    description
  });
...
}

在突变中你必须创建一个同名的函数 SET_NEW_ITEM:

const SET_NEW_ITEM = (state, description) => {

}

【讨论】：

我知道我可以使用这些动作。通常，当您有一些异步操作或需要在操作函数内提交多个突变时，操作函数需要。在这个例子中，我没有任何异步操作，也不需要使用动作函数提交一些突变函数。非常感谢您的回复@x-rw，但可能没有动作功能。看那个 - scrimba.com/scrim/cqKK4psq?pl=pnyzgAP

【解决方案2】：

您的操作已将上下文和有效负载参数合并为一个，而不是将它们分开：

addItem({ commit }, payload) {  ✅  // Correct

addItem({ commit, payload }) {  ❌  // Incorrect

另一个问题是您的模块的state 是一个数组而不是一个对象，并且被直接使用，就好像它是一个状态项一样。将state设为对象，并将项目数据放入数组属性中：

state: {
  items: [
    { id: "1", name: "1" },
    { id: "2", name: "2" },
    { id: "3", name: "3" }
  ]
}

更改您的计算以使用此items 属性：

const ItemsState = computed(() => store.state.a.items);

在突变中，推送新值（您之前的值不会改变state，因为它只是改变了函数参数引用）：

SET_NEW_ITEM(state, payload) {
  state.items.push(payload);
}

您不需要调用此操作：

function addItem() {
   let newItem = { id: "5", name: "5" };
   store.commit('a/SET_NEW_ITEM', newItem)
}

【讨论】：