如何让 vue DevTools 自动提交 vuex 突变？答案

【问题标题】：How can I get vue DevTools to automatically commit vuex mutations?如何让 vue DevTools 自动提交 vuex 突变？
【发布时间】：2019-12-25 14:07:37
【问题描述】：

我看到了这些突变：

但只有当我点击向下箭头时，他们才会真正承诺。我怎样才能让它们随着应用的进展而自动提交？

【问题讨论】：

标签： vue.js vuejs2 vuex vue-devtools

【解决方案1】：

向下箭头（标记为“全部提交”）仅在开发工具的 Vuex 历史中“提交”突变。此突变历史允许您检查单个突变和应用它们时的状态。它只是带有状态快照的调试辅助工具。

单击“全部提交”只是将所有突变历史压缩到一个新的“基本状态”中。换句话说，如果它对您的需求来说太长，它会丢弃突变历史。然而，这与在 Vuex 存储中提交突变无关。 Vuex 存储始终包含最新状态，包括所有突变。

所以我真的看不出自动点击向下箭头的意义，因为那只是调试信息，应该根据需要明确控制。

【讨论】：

我有一个奇怪的情况，我手动测试我的应用程序，它可以工作，但是当我提交所有并重复手动测试时，我刚刚做了它给我一个关于未定义函数的错误。这只发生在开发工具中全部提交时。任何想法。

【解决方案2】：

我也遇到了这种行为。我不知道这是否适用于您的问题，但由于我确实找到了解决方法，我想我会在这里提及它以供将来使用。

任何Vuex getters 都是根据Vuex 实例的特定state 对象计算的。 getter 确定它所基于的 state 对象，并且仅在它所基于的 state 对象之一以某种方式被修改时才更新。这样做是出于性能原因，因此您不必在每次更改任何状态值时都重新计算所有 getter。

在我的例子中，突变修改了初始化 getter 时不存在的属性。因此 Vue 实例不知道 getter 需要更新。通过将突变重置为新的Base State，getter 然后认识到它确实应该基于此属性，然后在属性更改时进行响应式更新。

通过在一开始就将 recalcitrant 属性添加到 Vuex state 实例中解决了这个问题，以便在属性更改时更新 getter。

如here所覆盖

由于 Vue 不允许动态添加根级响应式属性，因此您必须通过预先声明所有根级响应式数据属性来初始化 Vue 实例，即使是空值。

还有here:

理想情况下，尝试预先使用所有需要的字段来初始化您的状态。

希望这对某人有所帮助！

【讨论】：