javascript - VueX 通过提交更新状态

Question

我对 Vuex 很陌生，有人能告诉我为什么我不能从一个 Action 访问状态，修改它，然后提交它吗？在更改状态数组之前，我制作了它的“深层”副本。这样做的替代最佳实践方法是什么？

这是我的操作:

[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

仅对突变中的状态进行更改。 (这就是它被称为突变的原因。)您不需要克隆列表。为设置 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这是某个状态数组的一项。