single-spa微前端中Vue3+Pinia状态初始化错误求解决方案

问题描述 #

我需要在single-spa微前端架构的Vue3应用中集成Pinia，要求状态仅对当前应用可见。原本我在handleInstance钩子中创建并挂载Pinia，但由于该钩子在应用实例创建完成后才执行，导致组件渲染时调用useStore出现以下错误：

原代码（main.ts） #

import { h, createApp } from 'vue';
import singleSpaVue from 'single-spa-vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render() {
      return h(App, {
        // single-spa props are available on the "this" object. Forward them to your component as needed.
        // if you uncomment these, remember to add matching prop definitions for them in your App.vue file.
        // name: this.name
      });
    },
  },
  handleInstance(app) {
    const pinia = createPinia();
    app.use(pinia);
  },
  replaceMode: false,
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

错误信息 #

single-spa-layout.min.js:2 Uncaught Error: application '@b-velop/measurement' died in status LOADING_SOURCE_CODE: [🍍]: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.
    at useStore (pinia.mjs:1707:19)
    at ../../node_modules/.pnpm/babel-loader@8.3.0_@babel+core@7.22.10_webpack@5.88.2/node_modules/babel-loader/lib/index.js!../../node_modules/.pnpm/ts-loader@9.4.4_typescript@4.5.5_webpack@5.88.2/node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!../../node_modules/.pnpm/vue-loader@17.2.2_vue@3.3.4_webpack@5.88.2/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/SensorView.vue?vue&type=script&lang=ts (SensorView.vue:4:15)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/SensorView.vue?vue&type=script&lang=ts (App.vue:1:456)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/SensorView.vue (App.vue:25:16)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

解决方案 #

问题核心是handleInstance的执行时机滞后于组件初始化流程：组件渲染时调用useStore，但Pinia还没被挂载到Vue应用实例上，因此找不到活跃的Pinia实例。

直接重写createApp方法，在创建Vue应用实例后立即安装Pinia，无需依赖handleInstance：

修改后的代码（main.ts） #

import { h, createApp } from 'vue';
import singleSpaVue from 'single-spa-vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const vueLifecycles = singleSpaVue({
  // 重写createApp，创建实例后立刻安装Pinia
  createApp: (props) => {
    const app = createApp(props);
    const pinia = createPinia();
    app.use(pinia);
    return app;
  },
  appOptions: {
    render() {
      return h(App, {
        // single-spa props are available on the "this" object. Forward them to your component as needed.
        // if you uncomment these, remember to add matching prop definitions for them in your App.vue file.
        // name: this.name
      });
    },
  },
  replaceMode: false,
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

说明 #

这种方式下，每个微前端应用都会创建独立的Pinia实例，既保证了状态仅对当前应用可见，又能确保组件初始化时Pinia已经完成挂载，彻底解决getActivePinia()报错的问题。

内容的提问来源于stack exchange，提问作者Beta-Logics