Using stores inside different store actions and passing Pinia instance on SSR

[niksy]

Let’s say I have following application code:

import { createSSRApp } from "vue";
import { createPinia } from "pinia";
import App from "./app.vue";
import api from "./api.js";

const pinia = createPinia();
const app = createSSRApp(App);

pinia.use(() => ({
  api: api,
}));

app.use(pinia);

Component app.vue looks like this:

import usePageStore from "./page-store.js";

export default {
  async fetchData({ pinia }) {
    await usePageStore(pinia).fetchData();
  },
};

Store ./page-store.js looks like this:

import useMainStore from "./main-store.js";

export default defineStore("page", {
  state: () => ({
    data: null,
  }),

  actions: {
    async getData(params) {
      const mainStore = useMainStore();
      const data = await this.api();
      this.data = data.data;
      mainStore.setGlobalProps(data.globalProps);
      return data;
    },
  },
});

And explanation on some core parts is as following:

• Custom component static method fetchData is called on SSR to fetch initial data, and on each route change when that component gets activated
• From documentation on using stores outside components we know that we have to pass Pinia instance on every SSR request to prevent cross request state pollution, so we do that in fetchData since it’s just static method without any knowledge of Vue instance
• Inside page store we also want to use different store, and from documentation on using actions in SSR aplications we know that we need to instantiate stores before any await calls to prevent losing Pinia instance context

My question is do we also need to pass Pinia instance to useMainStore call inside usePageStore action when running inside SSR, or is that considered under definition "inside component" and it’s not necessary inside that context?

Is Pinia already implicitly available for every page store instantiation if Pinia instance was passed before when instantiating parent store? I know that should work for non-SSR (client) context, but I’m not sure for SSR context.

For example, in the code example for shared actions call to useUserStore doesn’t have Pinia instance as argument, and the documentation mentions SSR apps, so my understanding is that it isn’t necessary to pass Pinia instance to any external store calls inside actions if it was already passed down to parent store which has that action defined.

[timothyjohnwilson]

I'm curious if something like this would work:

export default (pinia, hot) => defineStore("page", {
  state: () => ({
    data: null,
  }),

  actions: {
    async getData(params) {
      const mainStore = useMainStore(pinia);
      const data = await this.api();
      this.data = data.data;
      mainStore.setGlobalProps(data.globalProps);
      return data;
    },
  },
})(pinia, hot);