Javascript VueX通过提交操作更新状态

我是Vuex的新手，有人能告诉我为什么我不能从一个操作访问状态，修改它，然后提交它吗？在更改状态数组之前，我对其进行“深度”复制。做这件事的最佳实践方法是什么

这是我的行动：

[Action.UPDATE_CHERRYPICK_SIZE] ({ state, commit }, { recipe, size }) {
    var shoppinglist = [...state.shoppinglist]
    var cp = shoppinglist.find(v => v.recipe.id === recipe.id)
    cp.size = size
    commit(Mutation.SET_SHOPPINGLIST, shoppinglist)
}

---

最好的做法是编写一个变种来更新状态。在SET_SHOPPINGLIST中，您可以访问状态和设置值

在Vuex存储中实际更改状态的唯一方法是提交 突变。Vuex突变与事件非常相似：每个突变 具有字符串类型和处理程序。handler函数就是我们需要的地方 执行实际状态修改，它将接收状态为 第一个论点：

---

请参阅以查看代码示例。

仅更改突变中的状态。（这就是为什么它被称为突变。）你不需要克隆列表。为设置

cp

size创建变异：

SET_CP_SIZE(state, { cp, size }) {
  cp.size = size;
}

在你的行动中：

[Action.UPDATE_CHERRYPICK_SIZE] ({ state, commit }, { recipe, size }) {
  var cp = state.shoppinglist.find(v => v.recipe.id === recipe.id)
  commit(Mutation.SET_CP_SIZE, { cp, size })
}

---

这种方法不直接在变异中使用

状态

，但这很好。相反，您正在设置

cp

，它是某个状态数组的一项。

在本例中，副本很浅！？我也试着这样做。。var shoppinglist=state.shoppinglist.slice（）。。同样的结果是。slice也是浅层的——只要你的变异比你复制的更深，你就会触发setter警告，那么怎么做呢？；）在浅层副本上可以工作的是

item.splice（item.findindex，1，newlyCreatedMutatedItem）

，但它只是我的jsut-in-head编译器-因此未经测试