javascript - VueX 通过提交从操作更新状态

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

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