在组件之间共享全局 pinia 存储

Question

我有两个带有自己的加载器的 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 存储加载到多个组件中：

皮尼亚专卖店：

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。我猜，这两个组件都将存储加载为本地实例。

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

Answer 1

经过长时间的搜索，我发现这非常简单（就像通常一样......）。就我而言，我使用 Vue.js 的渐进式方面将应用程序放置在 HTML 代码的不同位置。具体来说，我想用商品数量填充布局标题中的购物车图标。因此，我使用 App.vue 作为我的产品应用程序，使用 Basket.vue 作为我的购物篮指标。

简单的技巧是仅实例化 pinia 一次。假设您有一个 main.js 作为应用程序的入口点：

import { createApp } from "vue";
import App from "./App.vue";
import Basket from "./Basket.vue";

import {createPinia} from 'pinia';

const pinia = createPinia();

// Init App
createApp(App)
   .use(pinia)  
   .mount("#app");

// Init Basket
createApp(Basket)
    .use(pinia)   
    .mount("#basket");

在您的 App.vue 中，您只需导入您的商店（在我的例子中是产品商店和购物车商店）。

<script setup>
... import components ...

import {useProductStore} from "@/stores/ProductStore";
import {useCartStore} from "@/stores/CartStore";

const productStore = useProductStore();
const cartStore = useCartStore();

productStore.fill();

</script>

<template>
... your components ...
</template>

在你的 Basket.vue 中也是如此：

<script setup>
import CartWidget from "@/components/CartWidget.vue";

import {useCartStore} from "@/stores/CartStore";
import {useProductStore} from "@/stores/ProductStore";

const cartStore = useCartStore();
const productStore = useProductStore();

productStore.fill();

</script>

<template>
    <div class="container">
        <CartWidget/>
    </div>
</template>

就是这样。

“pinia”：“^2.0.17”，“vue”：“^3.2.39”