Vue 3 Vuex 如何强制回调函数异步运行

Question

我将 Vuex 与 Vuex-persistantstorage 一起使用，并且我有一个表示应用程序模式的变量。当模式改变时，我想做几件事（让我们称之为 f()），比如打开侧边栏、改变路线等，其中一些事情会导致其他 Vuex 变量发生变化。

我尝试在 UI 元素和存储模式变量之间的计算属性中更改 f()。

我还尝试在模式变量上使用观察器并在那里进行其他更改 f()。

在所有情况下，我都会收到一个错误“不要在突变处理程序之外改变 Vuex 存储状态”。如果我删除了导致 Vuex 状态而不是模式更改的操作，那么问题就会消失。我对 Vues 变量的所有更改都在使用 store.commit 的突变处理程序中。

经过多次调试，似乎 f() 在模式更改时执行的响应式代码期间被同步调用，并且 Vuex 将所有 Vuex 变量视为一个大变量的一部分，以便在修改周期中修改到第二个 Vuex 变量第一个 Vuex 变量是一件坏事，因此会出错。

如何创建一个在 Vuex 变量的整个反应周期完成后执行的回调？

Answer 1

“不要在突变处理程序之外改变 Vuex 存储状态”

仅当您更改 Vuex 状态而不是从一个突变，或者如果突变以异步方式突变状态（即在突变函数返回之后）时，才会发生此错误。

我对 Vues 变量的所有更改都在使用 store.commit 的突变处理程序中

不过，显然状态是在突变之外发生突变。

经过多次调试，似乎 f() 在模式更改时执行的响应式代码期间被同步调用，并且 Vuex 将所有 Vuex 变量视为一个大变量的一部分，以便在修改周期中修改到第二个 Vuex 变量第一个 Vuex 变量是一件坏事，因此会出现错误。

不确定你的结论是否正确。何时调用 f() 无关紧要，只要状态突变在突变函数中同步发生即可。

如何创建一个在 Vuex 变量的整个反应周期完成后执行的回调？

这可能不是解决方案 (XY problem)。

如果您可以提供触发错误的状态突变发生的代码行，将会很有帮助。