2

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

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

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

在此处输入图像描述

在此处输入图像描述

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

formState idle 
formState createImageContent

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

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

4

1 回答 1

1

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

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

我不是 Vuetify 专家，所以我不知道为什么确切地用值v-window更新，但它肯定会。我通过激活 Vuex严格模式发现了问题，该模式在某些状态在突变之外发生突变时会引发错误。它会抛出一个错误，从堆栈跟踪中您可以看到问题是由突变引起的v-modelcreateImageContentv-window$store.getters['form/formState'].value

Easy fix 不是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 getterv-model

于 2021-05-27T09:32:53.210 回答