Stores cannot be used before lifecycle hooks

[LadislavBohm]

Reproduction

Maybe it is my misunderstanding of how stores work and it's by design but currently Vue throws a warning when I use lifecycle hooks and declare them after declaring a store. I would like to declare stores at the beginning of setup() method and then use them within my hooks.

I modified the sandbox to include the warning, if you move the lifecycle hook at the top of setup method it goes away.
https://codesandbox.io/s/pinia-vue-3-demo-forked-85iy9?file=/src/App.vue

Warning thrown:
onBeforeMount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

Is this behavior ok? If so, am I supposed to instantiate store every time inside hooks?

Expected behavior

I would expect using stores with hooks to be without any restrictions.

Actual behavior

I have to declare lifecycle hooks before declaring stores as if they were await calls.

[posva]

Yeah, this is a limitation that needs to wait for vuejs/rfcs#212. For now, it's necessary to call the useStore function at the end of setup or call pinia.store(useStore) for each store in your main.js file (it will also remvoe the code splitting)

[LadislavBohm]

I am wondering whether there is an easier way to call pinia.store for all stores. Currently this feels like the biggest issue for me as moving things around setup function does not make it readable or maintainable. Also not always possible and required multiple instances of pinia stores around one setup function.

In some compiled language I would use reflection to register stuff like that within an assembly. Doesn't seem like the mentioned RFC got a lot of positive feedback 😰

[posva]

It's annoying for me too. The easiest workaround is to import all stores in your main.js file and call pinia.store(useStore) to instantiate them.

The RFC will go through a way or another because there is a need for it

[LadislavBohm]

Thanks I will end up doing that. Generally is this the same reason why this is happening?

const firstInstance = getCurrentInstance(); //resolves properly
const userEditStore = useSomeStore();
const secondInstance = getCurrentInstance(); //always null

This seems to be the reason why useVuelidate which is internally calling getCurrentInstance is failing. I wanted to bind vuelidate directly to my store state so I will just import all stores at start like you mentioned.

[posva]

yes, it breaks current instance because it creates one itself to outlive component scoped for the state, but creating it outside of a component, by calling useStore for the first time, doesn't break any current instance 🙂

[lk0606]

@posva

I use pinia^2.0.13 in vue2, and postinstall npx vue-demi-switch 2, alll ok.
but when i use onBeforeMount or others Lifecycle in setup, how can i resolve it?