Vuex：是否有确定是否发生 state 更改的“最佳实践”？

Question

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

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

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

我们已经讨论过深入观察 state 并在每次发生突变时生成 hash，但质疑该方法可能引入的性能后果。

我们考虑过翻转 boolean（在保存表单的组件中或在 state 本身中）以指示是否发生了更改，但同意我们宁愿不硬编码这样的某些值。

是否有确定给定模块的 state 是否已更改的最佳实践？

谢谢你。

Answer 1

我建议使用另一种方法：

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

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