我有两个带有自己的加载器的 vue 组件，分别挂载到两个已经渲染的 DOM 节点中：

组件 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'));

组件 B：

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 存储加载到多个组件中：

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;
        }
    }
})

如果组件 A 在此存储中设置一个值，则组件 B 应该对更改做出反应。

组件 A：

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

组件 A 中 {{globalApplicationStore.foobar}} 的输出在 2 秒后从 100 变为 400，这与预期一致。

组件 B：

const globalApplicationStore = useGlobalApplicationStore();

组件 B 中 {{globalApplicationStore.foobar}} 的输出没有从 100 变为400. 我猜，两个组件都将存储加载为本地实例。

如何在单独安装的组件之间共享存储？