@winner-fed/plugin-pinia

@winner-fed/plugin-pinia 是一个为 Vue3 项目集成 Pinia 状态管理库的插件。该插件提供了自动配置、Store 自动发现和导出等功能，让您能够快速在项目中使用 Pinia 状态管理。

功能特性

• 🎯 自动配置 - 自动配置 Pinia 的 alias 和模块联邦（mfsu）设置
• 🔍 自动发现 - 自动发现和导出项目中的 Store 文件
• 🚀 零配置 - 开箱即用，无需复杂配置
• 📦 模块联邦支持 - 自动处理 mfsu 配置，确保 Pinia 在模块联邦环境下正常工作
• 🔄 运行时集成 - 自动创建运行时文件来初始化 Pinia
• 💾 持久化支持 - 支持 Store 的持久化存储

安装

npm install @winner-fed/plugin-pinia
# 或
yarn add @winner-fed/plugin-pinia
# 或
pnpm add @winner-fed/plugin-pinia

使用方法

1. 配置插件

在您的 win 配置文件中启用插件：

export default {
  plugins: [
    '@winner-fed/plugin-pinia'
  ],
  pinia: {
    // 插件配置选项
  }
}

2. 创建 Store

在 src/stores 目录下创建您的 Store 文件：

// src/stores/count.ts
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const name = ref('Eduardo');
  const doubleCount = computed(() => count.value * 2);
  
  function increment() {
    count.value++;
  }

  return { count, name, doubleCount, increment };
}, {
  persist: true, // 启用持久化
});

3. 在组件中使用

<script lang="ts" setup>
const store = useCounterStore();

const increment = () => {
  store.increment();
};

const doubleValue = computed(() => store.doubleCount);
</script>

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <p>Double Count: {{ doubleValue }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Store 文件发现规则

插件会自动扫描以下位置的 Store 文件：

• src/stores/**/*.{ts,tsx,js,jsx} - 全局 Store 目录
• src/pages/**/stores/**/*.{ts,tsx,js,jsx} - 页面级 Store 目录

文件筛选规则

• 忽略 .d.ts 类型定义文件
• 忽略测试文件（.test., .e2e., .spec.）
• 只识别包含 defineStore 的文件作为 Pinia Store

配置选项

export default {
  pinia: {
    // 自定义配置选项
    // 目前支持任意配置项
  }
}

自动生成的文件

插件会自动生成以下临时文件：

1. index.ts - 导出所有 Store 和 Pinia 相关功能
2. runtime.tsx - 运行时初始化文件，包含 Pinia 实例的创建和注册

API 参考

usePiniaStore()

获取 Pinia 实例：

import { usePiniaStore } from '@winner-fed/plugin-pinia';

const pinia = usePiniaStore();

getAllStores(api)

获取所有 Store 文件列表（插件内部使用）：

import { getAllStores } from '@winner-fed/plugin-pinia';

const stores = getAllStores(api);

模块联邦支持

插件自动处理 mfsu（模块联邦）配置，确保 Vue 作为单例使用：

{
  mfsu: {
    shared: {
      vue: {
        singleton: true,
        eager: true
      }
    }
  }
}

注意事项

1. Vue3 专用 - 该插件仅适用于 Vue3 项目
2. Store 命名 - Store 文件必须包含 defineStore 才会被识别
3. 文件位置 - Store 文件应放在 src/stores 或页面级 stores 目录中
4. 持久化 - 如需持久化存储，请在 Store 定义中添加 persist: true 选项

示例项目

查看 examples/with-pinia 目录获取完整的使用示例。

许可证

MIT

更新日志

查看 CHANGELOG.md 了解版本更新历史。