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">

我不是虚拟专家，所以我不知道为什么v-window要用值createImageContent更新v-model，但它确实是这样做的。我通过激活Vuex 严格模式发现了这个问题，当某个状态在变异之外发生变异时，就会产生错误。它引发一个错误，从堆栈跟踪中可以看到问题是由v-window变异$store.getters['form/formState'].value引起的。

简单的修复方法不是使用v-model，而是使用:value：

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

演示

更新

好吧，我找到原因了。v-window有一个默认情况下为true的无证支柱mandatory (来源)。在这种模式下，v-window期望(并强制执行)至少一个<v-window-item>子组件在任何时候都处于活动状态。当您将状态设置为idle时，不存在具有此值的<v-window-item>，因此它自己选择一个项(首先未禁用)并更新v-model。因此，另一个解决方案是将:mandatory="false"添加到<v-window>中。

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