Vue组件/插件能否拥有独立Pinia状态？多实例状态隔离方案

我开发了一个可通过npm安装使用的Vue插件式独立组件，组件内部用Pinia管理状态，但页面中存在多个组件实例时（比如多个<fancy-calendar />），所有实例会共享同一Pinia状态，导致状态混乱。组件包含多层子组件，整体状态依赖Pinia管理。

原有Pinia配置 #

插件入口 index.js #

import myPlugin from "./myPlugin.vue";
import { createPinia } from "pinia";

const pinia = createPinia();

export function myFancyPlugin(app, options) {
    app.use(pinia);
    app.component("myPlugin", myPlugin);
}

组件及子组件使用方式 #

myPlugin.vue及各级子组件均导入并使用同一固定ID的store：

<script setup>
import { useMyStore } from '@/myPlugin/stores/myStore'
import { SubComponent1 } from '@/myPlugin/components/SubComponent1'
import { SubComponent2 } from '@/myPlugin/components/SubComponent2'
...

const store = useMyStore()
</script>

原Store定义（myStore.js） #

import { defineStore } from "pinia";

export const useMyStore = defineStore("myStore", {
    state: () => ({
        ...
    }),

    getters: {
        ...
    },

    actions: {
        ... 
    }
});

解决方案：为每个组件实例创建独立Pinia Store #

1. 修改Store定义，支持动态ID #

修改myStore.js，让useMyStore接收动态ID参数，以此创建独立的store实例：

import { defineStore } from "pinia"

export const useMyStore = (id) =>
    defineStore(id, {
        state: () => ({
            ...
        }),

        getters: {},

        actions: {},
    })();

2. 父组件生成唯一ID并传递 #

在插件根组件myPlugin.vue中生成唯一UUID，通过Vue的provide传递给所有子组件：

...
<script setup>
import { provide } from "vue"
import { useMyStore } from '@/MyNewPlugin/stores/MyStore'
import { v4 } from "uuid"

const storeId = v4()
provide('storeId', storeId)
const store = useMyStore(storeId)
...
</script>

3. 子组件通过inject获取ID并使用对应Store #

所有子组件通过inject获取父组件提供的唯一ID，初始化对应实例的Store：

<script setup>
import { inject } from "vue"
import { useMyStore } from '@/MyNewPlugin/stores/MyStore'

const storeId = inject('storeId')
const store = useMyStore(storeId)
</script>

通过以上改造，每个组件实例都会拥有独立的Pinia状态，不会互相干扰。

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