XState 不会停留在空闲状态

Posted 2023-02-19

【中文标题】XState 不会停留在空闲状态

【英文标题】：XState doesn't stay in idle state

【发布时间】：2021-08-12 13:36:55

【问题描述】：

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

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

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

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

formState idle 
formState createImageContent 

（它立即从空闲状态切换）

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

【问题讨论】：

您是否尝试过简化示例？当我删除 Vuetify 部分时，它对我来说没有问题。

@Kunukn 谢谢你的评论，没有Vuetify我还没试过，因为真正的应用程序（出现这个问题的地方）要大得多并且取决于Vuetify，但我会现在仔细看看...

【参考方案1】：

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

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

我不是 Vuetify 专家，所以我不知道为什么 v-window 将 v-model 更新为 createImageContent 值，但确实如此。我通过激活 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 属性 mandatory (source)，默认为 true。在这种模式下，v-window 期望（并强制）至少有一个<v-window-item> 子组件始终处于活动状态。当您将状态设置为 idle 时，没有具有此类值的 <v-window-item>，因此它会选择其中一个项目本身（首先不是禁用）并更新 v-model。所以另一种解决方案是将:mandatory="false"添加到<v-window>。

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