XState가 유휴 상태로 유지되지 않음

XState가 유휴 상태로 유지되지 않음

나는 사용하고 있다xstate와 함께vuex내 애플리케이션에서:

• vuex사용자, api 호출, 응답 항목 등을 처리한다.
• xstate주로 복잡한 형태 상호작용을 처리한다.

그 이유로, 그 복잡한 형태는 서로 의사소통하는 여러 요소들을 포함하고 있다.xstate 구성 요소 레벨이 아닌 내부vuexxstate visualizer 내부에서는 다음과 같이 동작하는 것 같다.

나는 주 사이를 전환할 수 있지만, 실제 적용에서는 초기 상태(공회전)로 돌아간 다음 그대로 있을 수 없다.그것은 항상 다음 것으로 바뀐다.내가 뭘 잘못하고 있는지 모르겠지만 콘솔에 state getter라는 서식을 기록했는데 출력은 다음과 같다.

formState idle 
formState createImageContent 

(즉시 공회전 상태에서 전환)

구현의 기본 예는 다음과 같다: https://codesandbox.io/s/boring-shape-b4lgk

문제는 당신의 것이다.Form.vue구성 요소정확히 말하자면:

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

나는 Vuetify 전문가가 아니라서 정확히 왜 그런지 모르겠다.v-window업데이트v-model그 값어치로createImageContent하지만 확실히 그렇다.나는 돌연변이 외부에서 어떤 상태가 변이될 때마다 오류를 발생시키는 Vuex 엄격한 모드를 활성화하여 문제를 발견했다.그것은 오류를 발생시키고 당신은 스택 추적에서 당신은 그 문제의 원인이 되는 것을 볼 수 있다.v-window변절시키다$store.getters['form/formState'].value

손쉬운 해결책이 사용되지 않음v-model사용하다:value대신:

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

데모

갱신하다

알았어, 이유를 찾았어. v-window문서화되지 않은 받침대를 가지고 있다.mandatory(출처) 즉true결석하여이 모드에서는v-window적어도 다음 중 하나 이상에 해당하는 것을 시행하고) 있다.<v-window-item>아동 구성요소는 항상 활성화된다.상태를 다음으로 설정할 때idle거기에는 없다<v-window-item>이러한 값을 사용하여 먼저 항목 자체 중 하나를 선택하고(비활성화되지 않음) 업데이트v-model그래서 또 다른 해결책은:mandatory="false"로<v-window>.

그러나 사용하지 않음v-modelVuex getter는 절대 함께 사용되어서는 안되기 때문에 아마도 더 안전하고 깨끗하다.v-model

참조URL: https://stackoverflow.com/questions/67668825/xstate-doesnt-stay-in-idle-state