vue.js - Vuex:在用户输入后如何判断状态是否是脏的/原始的？

Question

我有一堆用户可编辑的 Vuex 模块。仅当用户实际点击“保存”时，更改才会被保留，但是，我想处理未保存更改的情况。

我当前的方法是添加一个 isEdited bool 标志，这样我既可以显示通知，又可以防止通过确认对话框导航。

但是，如果用户进行更改然后撤消它，我无法判断当前状态与最初加载的状态相同。

当然，我可以复制状态并将其与当前状态进行比较，但这对于这样一个简单的功能来说感觉开销太大了。

有人可以推荐更好的方法吗？

Answer 1

Vee-validate 可以为您提供这样的东西(专注于用户输入):

• 对于 Vue2:https://vee-validate.logaretm.com/v3/guide/state.html#flags
• 对于 Vue3:https://vee-validate.logaretm.com/v4/guide/composition-api/validation#form-level-meta

您可以检查它是否脏。

PS:也许还有其他软件包可以做类似 Vee-validate 的事情，但那个是一个很好的软件包!

---

当然，您也可以与克隆对象一起进行比较，但是如果这是一个具有大量嵌套字段的大对象，那么这可能会相当繁重(也要小心如何在 JS 中正确比较 2 个对象，可能推荐 lodash)。

---

您可以使用useRefHistory创建历史记录并从堆栈中添加/删除。
不同的方法，但在我看来仍然是一种完全可行/好的方法。

---

你可以忽略整件事。
如果您不想要太多开销，这仍然是最好的方法。
而且，这种情况不会每次都发生。当它发生时，无论如何它都不会是一个大问题(IMO)。