不改变 Vuex 存储中的模块状态。浏览器 |视图

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

并且在突变中你必须创建一个具有相同名称的函数 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);

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

Not mutate module state in the Vuex store. Vuex | Vue