我怎样才能让 vue DevTools 自动提交 vuex 突变?

How can I get vue DevTools to automatically commit vuex mutations?

我看到了这些突变:

但只有当我单击向下箭头时,它们才会真正被提交。我怎样才能让它们随着应用程序的进展自动提交?

向下箭头(标记为 "Commit All")仅 "commits" 开发工具的 Vuex 历史记录中的突变。此突变历史允许您检查单个突变及其应用时的状态。它只是状态快照的调试辅助工具。

单击 "Commit All" 只是将所有突变历史压缩到一个新的 "Base State" 中。换句话说,如果突变历史对您的需要来说太长,它会丢弃它。然而,这与在 Vuex 存储中提交突变无关。 Vuex 存储始终包含最新状态,包括所有突变。

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

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

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

在我的例子中,突变修改了一个 属性,它在初始化 getter 时不存在。因此 Vue 实例不知道 getter 需要更新。通过将突变重置为新的 Base State,getter 然后认识到它确实 应该 基于这个 属性 并且此后每当属性 已更改。

这是通过在开始时将 recalcit运行t 属性 添加到 Vuex state 实例来解决的,这样 getter 每当 属性改了。

已涵盖here

Since Vue doesn’t allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even with an empty value.

还有here:

Ideally, try to initialize your state with all desired fields upfront.

希望这对某人有所帮助!