VueX 通过提交更新状态

Posted 2023-02-22

【中文标题】VueX 通过提交更新状态

【英文标题】：VueX update state from action with commit

【发布时间】：2020-05-30 03:17:24

【问题描述】：

我是 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)

【问题讨论】：

在这个例子中，副本是浅的！？

我也尝试过这样做 .. var shoppinglist = state.shoppinglist.slice() .. 结果相同。

切片也很浅——只要你的变异比你复制的更深，你就会触发设置器警告

呃，那怎么办呢？ ;)

可以在浅拷贝上工作的是 item.splice(item.findindex, 1, newlyCreatedMutatedItem) 但它只是我在头编译器中的 jsut - 所以未经测试

【参考方案1】：

仅对突变中的状态进行更改。 （这就是它被称为突变的原因。）您不需要克隆列表。创建突变以设置cp 大小：

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 )

这种方式不会直接在突变中使用state，但这很好。相反，您正在设置 cp，它是某个状态数组的一项。

【参考方案2】：

最佳实践是编写一个突变来更新状态。在 SET_SHOPPINGLIST 突变中，您可以访问状态和设置值。

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

请参考the link查看代码示例。