如何让组件库访问父项目中实例化的Pinia状态仓库？

1. 在组件库中补充类型化的访问入口定义 #

在组件库的types/stores/cardJson.ts中，除了已有的接口，新增类型化的Store获取函数类型和Vue依赖注入Key，只做约束不实现：

// 组件库 types/stores/cardJson.ts
export interface CardJsonStoreState {
  cardJson: CardJson;
}
  
export interface CardJsonStoreActions {
  update(cardJson: CardJson): void;
}

// 定义Store获取函数的类型
export type UseCardJsonStore = () => CardJsonStoreState & CardJsonStoreActions;

// 声明Vue依赖注入的唯一Key
import type { InjectionKey } from 'vue';
export const cardJsonStoreKey: InjectionKey<UseCardJsonStore> = Symbol('cardJsonStore');

2. 父项目中注入Store获取函数 #

在父项目的入口文件（如main.ts）里，把已实现的useCardJsonStore通过Vue的provide方法全局注入：

// 父项目 main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { useCardJsonStore } from './types/stores/cardJson';
// 注意替换成你的组件库包名
import { cardJsonStoreKey } from 'your-ui-lib/types/stores/cardJson';

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

// 将父项目的Store获取函数注入全局
app.provide(cardJsonStoreKey, useCardJsonStore);

app.mount('#app');

3. 组件库中通过依赖注入访问Store #

在组件库的Vue组件或工具函数中，用inject拿到父项目提供的Store获取函数，即可像父项目一样访问状态和调用方法：

<!-- 组件库内的示例组件 -->
<template>
  <div>{{ store?.cardJson }}</div>
  <button @click="handleUpdate">更新卡片数据</button>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { cardJsonStoreKey, type UseCardJsonStore } from '../types/stores/cardJson';

// 获取父项目注入的Store获取函数
const useCardJsonStore = inject<UseCardJsonStore>(cardJsonStoreKey);
// 调用函数得到Store实例
const store = useCardJsonStore?.();

const handleUpdate = () => {
  const newCardJson = []; // 你的新数据
  store?.update(newCardJson);
};
</script>

备选方案：全局变量绑定（适配非Vue组件场景） #

如果组件库中有非Vue组件需要访问Store，可以在父项目初始化时把Store挂载到全局对象：

// 父项目 main.ts
import { useCardJsonStore } from './types/stores/cardJson';

// 扩展window类型声明
declare global {
  interface Window {
    useCardJsonStore: typeof useCardJsonStore;
  }
}

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

// 挂载到全局window
window.useCardJsonStore = useCardJsonStore;

组件库中直接读取全局变量：

// 组件库内的工具函数
import type { UseCardJsonStore } from './types/stores/cardJson';

const useCardJsonStore = window.useCardJsonStore as UseCardJsonStore;
const store = useCardJsonStore();
// 正常访问状态和方法
console.log(store.cardJson);
store.update([]);

关键注意事项 #

• 依赖注入方案更符合Vue的设计原则，推荐优先使用
• 组件库中要做容错处理，比如inject可能返回undefined，需判断后再调用
• 确保组件库的TypeScript配置能正确识别父项目注入的类型，避免类型报错

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