将集合复制出 vuex 状态以防止突变是标准的吗？

Question

我搜索了 vue 论坛，有很多 2 年前的答案，但我很难找到一个专门解决这个问题的答案（我正在简化示例）：

1. 我有一组处于状态的对象（表的行数据）
2. 还有一个带有子组件的 tableComponent，它循环遍历数据并为集合中的每个项目创建一行
3. 要求是为绑定到rowData.foo的表中的每一行添加一个输入
4. tableComponent 有一个计算属性，该属性从 state 中获取 rowData，将这些对象放入一个新的（修改后的）数组中，并将其传递给 tableComponent 模板
5. 然后使用 rowData.foo 的 v-model 添加输入
6. 这可行，但我最近意识到它正在修改集合中 rowData 项的 foo 属性而不提交突变。

我可以删除 v-model 并使用 @input 提交更改，但我有两个关于它应该如何工作的问题

如果我想阻止这些更改，直到我点击“确认更改”按钮，它是标准/高性能吗？ _.cloneDeep 在 tableComponent 计算属性或 vuex getter 中的整个集合。这似乎是很多开销，但也许我对此过于保守？

允许 v-model 直接更新 RowData.foo 意味着每一行都知道要修改哪个 RowData 项，现在我正在对 vuex 集合中的单个对象进行更改，这是进行 vuex 突变的最佳实践_ .找到对象，更改它，然后将整个集合传播回商店？

与我的大多数其他 vue 问题一样，我有多种方法可以让它发挥作用，但我不确定最高效/最好的模式是什么。感谢您的帮助！

更新 这里有简单的代码沙箱：https://codesandbox.io/embed/vuex-store-olrvk 看看 vuex 数据是如何在没有动作调用的情况下更新的？

Answer 1

在查看了您的 codeSandbox 示例后，我发现是的，您的商店状态数据 rowCollection 在没有使用任何突变的情况下发生突变，这是因为 v-model（双向绑定）检测内存中的数据点并对其进行突变在幕后......当然这是 Vue 开发人员允许的，即使我在任何文档中都找不到关于此的内容（顺便说一下，他们在文档中展示了一个使用 v-model 的状态突变示例，但他们使用了存储突变）

关于what is the most performant/best pattern，我认为这种方式最简单、更简洁（代码更少）

Answer 2

如果您需要缓冲用户对反应模型的更改（用于提交操作），则需要进行深层复制。没有其他办法了。完全正常。