Creating state machines with shared context across instances

[DenniLa2]

Here my test machine.
https://stackblitz.com/edit/nuxt-xstate-playground-jtocz6?file=app.vue,components%2FXTest.vue,components%2Ftest.ts
I want the state to be shared between both components. Tell me how to do it

[Lexpeartha]

I think what you want to achieve can be done with sharing the same context between state machines. However that would require some modifications:

interface TestContext {
  state: ExState;
}

export const sharedContext: TestContext = {
  state: ExState.initial,
};

And in your component:

const machine1 = useMachine(testMachine, { context: sharedContext });
// These instances should share same state
const machine2 = useMachine(testMachine, { context: sharedContext });

Of course this in itself won't work, since you would have to update state machine to use assign() to update the context, and for that I recommend you check documentation reference

[DenniLa2]

@Lexpeartha You suggest copying the current state into the context? It turns out that I will not be able to share the machine without a common context?

[Lexpeartha]

I believe so. Since useMachine depends on vue lifecycle hooks, if you're feeling crafty, you might try injecting same instance via nuxt plugin, although I still think using context is better idea.