2

I'm setting up a microfrontends architecture with single-spa, vue3 and pinia.

I'm having some issue whereby I'm defining a store in a utiity microapp which gets imported in all other microapps. In a microapp I'm then creating a pinia as a plugin and setting app.use(piniaPlugin). Then in the microapp component I'm calling the useExportedStore() but this throws a pinia not found error.

Here some code snippets.

single-spa-utils

import { defineStore } from 'pinia';

export const useGlobalState = defineStore('GlobalState', {
  id: 'GlobalState',
  state: () => ({
    currentRoute: '/',
  }),
  getters: {},
  actions: {},
});

single-spa-microapp/main.js

  import { globalStorePlugin } from "@/plugins/storesPlugins";

  const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render() {
      return h(App, {});
    },
  },
  handleInstance: (app) => {
    console.log('>>> HANDLING INSTANCE APP')
    app.use(globalStorePlugin)
  },
});

single-spa-microapp/storePlugins.js

import { globalStore } from "@/stores/globalStore";

export const globalStorePlugin = {
  install: app => {
    console.log('globalStorePlugin :: installing globalStore pinia')
    app.use(globalStore);
  }
}

single-spa-microapp/component.vue

import { useGlobalState } from "@smart-inventory/smart-inventory-glob-lib";

const globalState = useGlobalState();
Irith
  • 93
  • 14
  • I am also facing the same issue. caught (in promise) Error: []: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) – Forkmohit Apr 13 '23 at 11:42
  • Your case is slightly different, single spa is against using state management across apps. See this: https://single-spa.js.org/docs/recommended-setup/#state-management – Forkmohit Apr 13 '23 at 11:51
  • I have read single-spa recommends importing Vue as a shared resource. It may apply to Pinia as well. I don't know enough of Pinia to know for sure if it is bad to have copies of the library running concurrently in the same webpage. Investigate about that. Second, I suppose that every microapp that wants to access the shared store needs to do app.use(pinia). Are you doing this? – José Ramírez Apr 30 '23 at 07:04
  • @Forkmohit The same Problem here. Pinia is accessed before it is initialized. First the components are processed and then ```handleInstace``` is called. Is there already a workaround for this? – Beta-Logics Aug 25 '23 at 21:17

0 Answers0