Question

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

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

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

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

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

Answer 1

你必须从动作中调用

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

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

const SET_NEW_ITEM = (state, description) => {

}

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

在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)
}