Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: (vue) vue reactivity is sometimes not properly triggered #5091

Open
Hebilicious opened this issue Sep 23, 2024 · 1 comment · May be fixed by #5095
Open

Bug: (vue) vue reactivity is sometimes not properly triggered #5091

Hebilicious opened this issue Sep 23, 2024 · 1 comment · May be fixed by #5095
Labels

Comments

@Hebilicious
Copy link

XState version

XState version 5

Description

When using a state machine with vue, I've noticed that reading part of the context in a component through useSelector or a computed wouldn't work without explicitly accessing the snapshot. Leading to weird edge cases where you'd have to console.log(snapshot.value) or add the snapshot in the template for it to be reactive.
Investigating further I tracked the root cause of the issue to the vue useSelector implementation.
Here are vue docs for reference : https://vuejs.org/api/reactivity-advanced.html#triggerref

The official stackblitz template is somehow not working for me, so here's a short code snippet that explains the issue :

// useMyMachine is a singleton to share the same actor accross multiple component.

// A.vue
cont { snpashot, actorRef } = toRefs(useMyMachine())
//This would not be reactive unless snapshot.value is accessed somewhere in a component.
const notWorkingDerivedState = useSelector(actorRef, (state) => state.context.someValue)

// B.vue
// This would work
const workingDerivedState = computed(() => {
if (snapshot.value.value) {
	return useSelector(actorRef, (state) => state.context.someValue)
 }
})

Expected result

useSelector should always return an up to date value.

Actual result

useSelector was returning an up to date value only if it was accessed manually.

Reproduction

Vue official template is not working

Additional context

The workaround for me was to re-implement all the export from vue-xstate locally. I'll make a PR shortly with the fix.

@davidkpiano
Copy link
Member

Thank you for the report - I would gladly take a look at that PR and improve this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants