Using functions to define a store and cleanups

[wobsoriano]

Hi, just want to know if I'm on the right path regarding using functions when defining stores and cleanups.

I want to make a composable for xstate with pinia and here's a snippet of it:

import { StateMachine, interpret } from 'xstate';
import { defineStore } from 'pinia';
import { ComputedRef, shallowRef, computed, onUnmounted } from 'vue';

export default function useMachine<M extends StateMachine<any, any, any, any>>(machine: M) {
    const service = interpret(machine);
    const { initialState } = service.machine;
    const useStore = defineStore(service.id, () => {
        const state = shallowRef(initialState)

        service.onTransition((nextState) => {
            const initialStateChanged = nextState.changed === undefined && Object.keys(nextState.children).length;
            if (nextState.changed || initialStateChanged) {
                state.value = nextState;
            }
        }).start();

        // Is this going to get called?
        onUnmounted(service.stop);

        return {
            state
        }
    });

    const store = useStore();

    return {
        state: computed(() => store.state),
        send: service.send,
        service
    }  as Store<M>;
}

Wondering if lifecycle hooks will work inside pinia store functions? Thanks!

[posva]

It won't ever get called as stores are never destroyed. There is #597 and using https://v3.vuejs.org/api/effect-scope.html#onscopedispose would run when calling $dispose()

[wobsoriano]

Checking this now. Thanks!