Vuex：是否有确定状态变化是否发生的“最佳实践”？答案

【问题标题】：Vuex: Is there a "best practice" for determining whether a state change has taken place?Vuex：是否有确定状态变化是否发生的“最佳实践”？
【发布时间】：2021-02-24 17:44:10
【问题描述】：

我和我的团队创建了一个 Vuex 模块，用于存储表单的用户输入内容。如果表单包含未保存的更改，并且用户尝试导航离开，那么我们会警告用户以便让他们有机会取消导航。

如果我们可以简单地检查一个内置的 getter，那就太好了。可能是这样的：

if (this.$store.getters['myModule/hasChanged']) {
    // alert user
} else {
    // allow user to proceed
}

我们已经讨论过深入观察状态并在每次发生突变时生成哈希值，但质疑这种方法可能带来的性能后果。

我们考虑过翻转一个布尔值（在包含表单的组件中或状态本身中）来表示是否发生了更改，但同意我们宁愿不硬编码这样的一些值。

是否有确定给定模块的状态是否已更改的最佳做法？

谢谢。

【问题讨论】：

标签： javascript typescript vue.js vuejs2 vuex

【解决方案1】：

我建议使用另一种方法：

将所有输入存储在组件本身中
跟踪组件本身的变化并设置一些布尔标志isChanged
当用户离开时：

if (this.isChanged) {
    // alert user
} else {
    // store all inputs to a state
    // allow user to proceed
}

【讨论】：