Question

我对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)
}

Answer 1

最佳做法是编写一个变异来更新状态。在SET_SHOPPINGLIST突变中，您可以访问状态并设置值。

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

请参阅the link以查看代码示例。

Answer 2

仅更改突变状态。（这就是为什么它被称为突变的原因。）您无需克隆列表。创建一个用于设置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，它是某个状态数组的项。

VueX通过提交操作更新状态

2 个答案: