Vue.js 将集合复制出vuex状态以防止突变是否为标准？

我已经浏览了vue论坛，有很多答案都是2年前的，非常接近，但我很难找到一个专门解决这个问题的答案（我正在简化示例）：

我有一个状态为的对象数组（表的行数据）

以及一个tableComponent，其中包含子组件，用于循环数据并在集合中为每个项创建一行

要求是向表中绑定到rowData.foo的每一行添加一个输入

tableComponent有一个computed属性，该属性从状态获取行数据，将这些对象放入一个新的（修改过的）数组中，并将其传递到tableComponent模板中

然后添加一个v型rowData.foo的输入

这是可行的，但我最近意识到它正在修改集合中rowData项的foo属性，而不提交突变

我同意放弃v-model并使用@input提交更改，但我有两个问题要问这个应该如何工作

如果我想在点击“确认更改”按钮之前阻止这些更改，是否符合标准/性能要求 _.cloneDeep在tableComponent computed属性或vuex getter中保留整个集合。这似乎是一个很大的开销，但也许我太保守了

允许v-model直接更新RowData.foo意味着每一行都知道要修改哪个RowData项，现在我正在对vuex集合中的单个对象提交更改，这是进行vuex变异的最佳做法。找到对象，更改它，然后将整个集合分散回存储区

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

更新 简单代码沙盒：

---

查看如何在没有操作调用的情况下更新vuex数据？

如果需要将用户更改缓冲到反应模型（用于提交操作），则需要进行深度复制。这是没有办法的。完全正常。

在查看您的codeSandbox示例后，我发现是的，您的存储状态数据

行集合

在没有使用任何突变的情况下发生了突变，这是因为

v-model

（双向绑定）检测内存中的数据点并在幕后对其进行突变。。。当然，这是Vue开发人员允许的，尽管我在任何文档中都找不到这一点（顺便说一下，他们在文档中展示了一个使用

v-model

的状态突变示例，但他们使用了存储突变）

---

关于

什么是性能最好的/最好的模式

我认为这种方法最简单，也更干净（代码更少）

请包括一个我可以解决的问题，但真正的问题是：组件应该直接使用vuex store collections还是使用它们的副本？是的，它们应该直接访问或修改存储数据？我添加了一个可复制性最低的示例。非常感谢。非常感谢你。你的答案和史蒂文的答案都非常有用谢谢你，我也不知道商店突变不使用突变是可能的。。。他们应该认真考虑这样的事情，因为他们在很大的应用程序有很大的关系，如果他们真的希望有框架的支持，非常感谢。你的答案和达博兹的答案都非常有用