我浏览了 vue 论坛，有很多 2 年前的答案，但我很难找到一个专门解决这个问题的答案(我正在简化示例):
- 我有一个处于状态的对象数组(表的行数据)
- 还有一个带有子组件的 tableComponent，它循环遍历数据并为集合中的每个项目创建一行
- 要求是向表中绑定(bind)到 rowData.foo 的每一行添加一个输入
- tableComponent 有一个计算属性，可以从状态获取 rowData，将这些对象放入新的(修改后的)数组中，然后将其传递到 tableComponent 模板中
- 然后添加带有 rowData.foo v 模型的输入
- 这可行，但我最近意识到它正在修改集合中 rowData 项的 foo 属性而不提交突变。
我可以删除 v-model 并使用 @input 提交更改，但我有两个关于这应该如何工作的问题
如果我想阻止这些更改，直到我点击“确认更改”按钮，它是否是标准/高性能的 _.clone 在 tableComponent 计算属性或 vuex getter 中加深整个集合。看起来开销很大，但也许我对此太保守了？
允许 v-model 直接更新 RowData.foo 意味着每一行都知道要修改哪个 RowData 项，现在我正在对 vuex 集合中的单个对象提交更改，这是进行 vuex 突变的最佳实践_ .找到对象，更改它，然后将整个集合传播回商店？
与我的大多数其他 vue 问题一样，我有多种方法可以使其发挥作用，但我不确定性能最高/最佳的模式是什么。感谢您的帮助!
更新 简单的代码沙盒在这里:https://codesandbox.io/embed/vuex-store-olrvk 看看 vuex 数据如何在没有操作调用的情况下更新？
最佳答案
查看您的 codeSandbox 示例后，我发现是的，您的商店状态数据 rowCollection 在不使用任何突变的情况下发生了突变，这是因为 v-model (双向绑定(bind))，它检测内存中的数据点并在幕后对其进行变异...当然，这是 Vue 开发人员允许的，即使我在任何文档中都找不到这一点(顺便说一句，他们在文档中展示了一个示例)使用 v-model 进行状态突变，但他们为此使用了存储突变)
关于什么是最高效/最好的模式我认为这种方式是最简单和更干净(更少的代码)
关于vue.js - 将集合复制出 vuex 状态以防止突变是标准做法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57098165/