XState 不会停留在空闲状态

Question

我在我的应用程序中同时使用 xstate 和 vuex：

• vuex 处理用户、api 呼叫、响应项目等
• xstate 主要处理复杂的表单交互。

由于这个原因，复杂的表单包含多个组件，它们相互通信我必须在组件级别上实现 xstate 而不是 ，但在内部 vuex。在 xstate 可视化器中它似乎工作：

我可以在状态之间切换，但在实际应用中它不能回到它的初始状态（空闲）然后停留在那里。它总是转换回下一个。我不知道我做错了什么，但我有控制台记录了 formState getter 并且输出如下所示：

formState idle 
formState createImageContent 

（立即从空闲状态切换）

这是实现的基本示例：https://codesandbox.io/s/boring-shape-b4lgk

Answer 1

问题出在您的 Form.vue 组件中。准确地说，在这一行中：

<v-window v-model="$store.getters['form/formState'].value">

我不是 Vuetify 专家所以我不知道为什么 v-window 用值 createImageContent 更新 v-model 但它确实如此。我通过激活 Vuex strict mode 发现了问题，只要某些状态在突变之外发生突变，就会引发错误。它抛出一个错误，从堆栈跟踪中您可以看到问题是由 v-window 突变 $store.getters['form/formState'].value

引起的

简单的解决方法是不使用 v-model 而是使用 :value：

<v-window :value="$store.getters['form/formState'].value">

Demo

更新

好的，我找到原因了。 v-window 有一个 undocumented prop mandatory (source) 默认情况下是 true。在这种模式下，v-window 期望（并强制）至少有一个 <v-window-item> 子组件始终处于活动状态。当您将状态设置为 idle 时，没有 <v-window-item> 具有这样的值，因此它会选择其中一项本身（首先未禁用）并更新 v-model。所以另一种解决方案是将 :mandatory="false" 添加到 <v-window>.

但不使用 v-model 可能更安全、更清洁，因为 Vuex getter 永远不应该与 v-model

一起使用