Updated guidance on usage outside of Vue component

[glen-84]

I need to use a store to load some global data before the app is mounted, in order to supply some global data to certain Vue.js plug-ins.

Something like this appears to work:

const useX = defineStore({
    id: "x",
    state: () => ({globals: null}),
    actions: {
        async loadGlobals() {
            const data = await fetch(`${FRONT_END_URL}/globals.json`);

            this.globals = await data.json();
        }
    }
});

const app = createApp(App)
    .use(createPinia())
    .use(vuetify);

const storeX = useX();

await storeX.loadGlobals();

console.dir(storeX.globals);

// .use() other plug-ins.
// Mount the application.

... but the documentation scares me:

... the store won't be created until useStore() is called inside of setup()

It's not possible to call useStore() outside of a setup() function

Depending on where you do this it will fail

make sure to call useStore() inside functions that are called after your application is mounted (app.mount() or new Vue())

Is this still the case with Vue.js 3? Is it "safe" to do what I show above?

[posva]

May be I should tune it down a little. Most of the time, it will work. In your case, it will work fine because when a pinia is created and installed, it is set as active. For any other scenario, and any usage outside of setup: https://pinia.esm.dev/ssr/#using-the-store-outside-of-setup

[glen-84]

Thanks a lot for the confirmation. Much appreciated. 🙂