useStore after await causes Cross-Request State Pollution

[erikmode]

Hi!

Im building an app with SSR using Vue3 and Pinia. I noticed a bug where state between users/requests leaked between each other if request was sent at the same time.

It was caused by writing useStore after an await in one of my pinia action that was running on the server side, like this:

   //another-store.js
    async fetchUserData() {
      const someData = await fetch('https://mycoolapi.com/somedata')
      const userStore = useUserStore()
      this.data = { ...someData, user: userStore .data }
    }

But i later fixed the issue by moving the useUserStore above the await line like this:

   //another-store.js
    async fetchUserData() {
      const userStore = useUserStore()
      const someData= await fetch('https://mycoolapi.com/somedata')
      this.data = { ...someData, user: userStore.data}
    }

My questions is:

1. Why the state pollution happens when writing useStore after await?
2. Is there some way to avoid this mistake from happening by for example writing an ESlint rule to warn developers?

[erikmode]

Apperently it is mentioned here in the documentation:
https://pinia.vuejs.org/cookbook/composing-stores.html#shared-actions

"Since actions can be asynchronous, make sure all of your useStore() calls appear before any await. Otherwise, this could lead to using the wrong pinia instance in SSR apps"

[rafaellages-hotmart]

An ESlint rule will be really useful as this is super easy to happen

[posva]

Agree it would be useful! It should be added to #2638