如何将Pinia Store从Vue3应用传递至共用库并合并Store

问题背景 #

我维护一个供所有业务应用使用的Vue3基础库，部分应用会使用Pinia状态管理，库本身也提供3个Pinia Store。现在需要实现：将应用的3个Store与库的3个Store合并到同一个Pinia实例中，确保6个Store仅注入一次且均可在应用中正常调用。

当前方案遇到两个问题：

• 在库的install方法中调用useStripeStore()时，抛出错误：Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?
• 如果应用和库各自创建Pinia实例，会导致Store被重复注入。

当前无效代码 #

应用端（main.ts） #

const app = createApp(App);

const pinia = createPinia();
app.use(pinia);

// 注入基础库
app.use(VueNyx, { pinia });

router.isReady().then(() => {
  app.mount('#app');
});

库端（index.ts） #

export default {
  install: (
    app: App,
    options: { pinia?: Pinia } | null = null) => {
    // 全局插件处理
    if (!options?.pinia) {
      // 若应用未使用Pinia，则创建一个
      app.use(createPinia());
    }

    // 尝试调用库的Store，触发错误
    useStripeStore().setStripeLoadedByDefault();
  },
};

错误原因 #

在库的install方法中直接调用useStripeStore()时，即便应用已经安装了Pinia，当前上下文也不存在活跃的Pinia实例。useStore系列钩子默认依赖组件setup、Pinia action等有活跃上下文的环境，或者需要手动指定Pinia实例才能正确初始化Store。

修复方案 #

核心思路是：复用同一个Pinia实例（应用传入则用应用的，未传入则库创建并安装），调用库的Store时手动指定Pinia实例，避免依赖活跃上下文。

修改库端的install方法：

export default {
  install: (
    app: App,
    options: { pinia?: Pinia } | null = null) => {
    // 统一获取Pinia实例：优先使用应用传入的，否则创建新实例并安装
    let pinia = options?.pinia;
    if (!pinia) {
      pinia = createPinia();
      app.use(pinia);
    }

    // 调用库的Store时手动传入Pinia实例
    const stripeStore = useStripeStore(pinia);
    stripeStore.setStripeLoadedByDefault();

    // 库的其他Store也按此方式调用，或让应用直接import后使用（共享同一Pinia实例）
  },
};

效果说明 #

• 应用端代码无需修改，保持原有传入Pinia的逻辑即可
• 应用的3个Store与库的3个Store会注册到同一个Pinia实例中，不会重复注入
• 应用可直接import库中定义的Store并使用，无需额外配置

内容的提问来源于stack exchange，提问作者Jakob Wulff