Stately
XState v6 alpha

Share actors

Provide one actor to Vue descendants.

XState v6 is in alpha

APIs and behavior may change before the stable release.

Create the actor in a parent component, then share its reference with Vue's provide and inject APIs.

const actorRef = useActorRef(machine);
provide(actorKey, actorRef);
const actorRef = inject(actorKey)!;
const count = useSelector(actorRef, (snapshot) => snapshot.context.count);

Create a unique actor for each application or request.

This works well for a cart shared by checkout components or a session actor shared by one application shell.