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一起使用