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

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

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

该模块包含一个状态和变异选项，只需在模块状态中添加一个新项即可。

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

CodesandBox => https://codesandbox.io/s/currying-fire-2p3eq?file=/src/App.vue

你必须从动作中调用

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

并且在mutation中你必须创建一个同名的函数SET_NEW_ITEM:

const SET_NEW_ITEM = (state,description) => {

}

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

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);

在mutation中，push新的值（你之前的值根本不会改变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)
}

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