如何在独立挂载的Vue组件间共享Pinia全局状态仓库？

问题场景 #

现有两个独立挂载的Vue组件，各自通过createApp创建应用实例并挂载到DOM节点：

Component A 挂载代码 #

import { createApp } from 'vue'
import ComponentA from '@/Vue/ComponentA.vue';
import {createPinia} from 'pinia';

createApp(ComponentA).use(createPinia()).mount(document.querySelector('.c-component-a'));

Component B 挂载代码（注意原代码存在笔误：createApp(ComponentA)应为createApp(ComponentB)） #

import { createApp } from 'vue'
import ComponentB from '@/Vue/ComponentB.vue';
import {createPinia} from 'pinia';

createApp(ComponentA).use(createPinia()).mount(document.querySelector('.c-component-b'));

全局Pinia仓库定义：

import {defineStore} from 'pinia';

export type RootState = {
    foobar: number;
}

export const useGlobalApplicationStore = defineStore({
    id: 'global',
    state: () => ({
        foobar: 100
    } as RootState),
    actions: {
        setFoobar(payload: number): void {
            this.foobar = payload;
        }
    },
    getters: {
        getFoobar(state: RootState): number {
            return state.foobar;
        }
    }
})

Component A中修改仓库值：

const globalApplicationStore = useGlobalApplicationStore();
setTimeout(() => {
   globalApplicationStore.setFoobar(400);
}, 2000);

Component A能正常响应状态变化，但Component B中{{globalApplicationStore.foobar}}始终显示100，无法同步更新。

原因分析 #

每个createApp都会创建独立的Vue应用实例，而每次调用createPinia()都会生成新的Pinia实例。两个组件分别使用各自的Pinia实例，导致Store状态完全隔离，无法共享。

解决方案：共享同一个Pinia实例 #

要实现状态共享，需让两个Vue应用使用同一个Pinia实例，具体步骤如下：

1. 创建全局共享的Pinia实例
   在单独的文件（比如src/shared-pinia.js）中创建并导出Pinia实例：

   import { createPinia } from 'pinia';
   // 创建全局共享的Pinia实例
   export const sharedPinia = createPinia();
   

2. 修改组件挂载代码，使用共享Pinia
   更新Component A和Component B的挂载逻辑，引入共享的Pinia实例并使用：

   Component A 修正后代码 #

   import { createApp } from 'vue'
   import ComponentA from '@/Vue/ComponentA.vue';
   import { sharedPinia } from './shared-pinia'; // 引入共享Pinia
   
   createApp(ComponentA).use(sharedPinia).mount(document.querySelector('.c-component-a'));
   

   Component B 修正后代码（同时修复原笔误） #

   import { createApp } from 'vue'
   import ComponentB from '@/Vue/ComponentB.vue';
   import { sharedPinia } from './shared-pinia'; // 引入共享Pinia
   
   createApp(ComponentB).use(sharedPinia).mount(document.querySelector('.c-component-b'));
   

修改完成后，两个组件会共用同一个Pinia实例，Component A修改Store状态时，Component B会自动响应变化。

内容的提问来源于stack exchange，提问作者Mikel Wohlschlegel