XState 不会处于空闲状态 state

Question

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

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

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

我可以在 state 之间切换，但在实际应用中，它不能 go 回到它的初始 state（空闲）然后呆在那里。 它总是转换回下一个。 我不知道我做错了什么，但我有控制台记录了 formState 吸气剂和 output 看起来像这样：

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严格模式发现了这个问题，只要某些 state 在突变之外发生突变，就会引发错误。 它抛出一个错误，从堆栈跟踪中您可以看到问题是由v-window改变$store.getters['form/formState'].value

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

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

演示

更新

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

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