diff --git a/packages/xstate-vue/src/useActor.ts b/packages/xstate-vue/src/useActor.ts index df03b5a786..659c63c063 100644 --- a/packages/xstate-vue/src/useActor.ts +++ b/packages/xstate-vue/src/useActor.ts @@ -4,7 +4,6 @@ import { Actor, ActorOptions, AnyActorLogic, - Snapshot, SnapshotFrom, type ConditionalRequired, type IsNotNever, @@ -42,11 +41,7 @@ export function useActor( ); } - function listener(nextSnapshot: Snapshot) { - snapshot.value = nextSnapshot; - } - - const actorRef = useActorRef(actorLogic, options, listener); + const actorRef = useActorRef(actorLogic, options); const snapshot = useSelector(actorRef, (s) => s); return { diff --git a/packages/xstate-vue/src/useActorRef.ts b/packages/xstate-vue/src/useActorRef.ts index 261f6bb606..e7daf8a6b5 100644 --- a/packages/xstate-vue/src/useActorRef.ts +++ b/packages/xstate-vue/src/useActorRef.ts @@ -1,4 +1,4 @@ -import { onBeforeUnmount, onMounted } from 'vue'; +import { onBeforeUnmount } from 'vue'; import { Actor, ActorOptions, @@ -35,12 +35,14 @@ export function useActorRef( const actorRef = createActor(actorLogic, options); let sub: Subscription; - onMounted(() => { - if (observerOrListener) { - sub = actorRef.subscribe(toObserver(observerOrListener)); - } + + if (observerOrListener) { + sub = actorRef.subscribe(toObserver(observerOrListener)); + } + + if (typeof window !== 'undefined' && typeof document !== 'undefined') { actorRef.start(); - }); + } onBeforeUnmount(() => { actorRef.stop(); diff --git a/packages/xstate-vue/src/useSelector.ts b/packages/xstate-vue/src/useSelector.ts index 2e76b61b27..85f679913f 100644 --- a/packages/xstate-vue/src/useSelector.ts +++ b/packages/xstate-vue/src/useSelector.ts @@ -47,7 +47,8 @@ export function useSelector< onCleanup(() => sub.unsubscribe()); }, { - immediate: true + immediate: true, + flush: 'sync' } );