如何通过类模板生成结构一致的多个Pinia Store？

首先指出你提供的代码存在的问题：

• 构造函数内部使用export属于语法错误，export只能在模块顶层声明
• 当前写法无法正确暴露创建好的Store实例，无法在外部调用使用

下面是正确的实现方案：

正确的类模板实现 #

我们可以封装一个类，通过构造函数接收Store名称，内部统一定义通用的状态和方法，每个类实例对应一个独立的Pinia Store，数据完全隔离。

import { ref } from 'vue'
import { defineStore } from 'pinia'

class StoreGenerator {
  constructor(storeName) {
    // 为当前实例创建独立的Store
    this.store = defineStore(storeName, () => {
      // 每个Store拥有独立的状态容器
      const objects = ref([])

      // 通用方法：添加数据
      function addObject(info) {
        objects.value.push(info)
      }

      // 通用方法：清空数据
      function clearObjects() {
        objects.value = []
      }

      return { objects, addObject, clearObjects }
    })
  }

  // 提供获取Store的公共方法
  getStore() {
    return this.store
  }
}

生成5个独立Store的示例 #

使用上述类模板，快速生成结构一致但数据独立的Store：

// 实例化生成不同名称的Store
const teamStoreGen = new StoreGenerator('team')
const userStoreGen = new StoreGenerator('user')
const productStoreGen = new StoreGenerator('product')
const orderStoreGen = new StoreGenerator('order')
const cartStoreGen = new StoreGenerator('cart')

// 导出这些Store供组件调用
export const useTeamStore = teamStoreGen.getStore()
export const useUserStore = userStoreGen.getStore()
export const useProductStore = productStoreGen.getStore()
export const useOrderStore = orderStoreGen.getStore()
export const useCartStore = cartStoreGen.getStore()

组件中使用示例 #

在Vue组件中，和使用普通Pinia Store的方式完全一致：

<script setup>
import { useTeamStore } from '@/stores/generatedStores'

const teamStore = useTeamStore()

// 向teamStore添加数据
teamStore.addObject({ id: 1, name: '开发团队' })
</script>

<template>
  <div>
    <h3>团队列表</h3>
    <ul>
      <li v-for="item in teamStore.objects" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

方案优势 #

• 每个Store的状态都是独立的ref实例，数据完全隔离，不会互相干扰
• 统一维护通用的状态和方法，后续修改只需调整StoreGenerator类，无需逐个修改每个Store
• 类的封装方式更易扩展，后续可以添加更多通用逻辑或配置项

简化方案：工厂函数（可选） #

如果觉得类的方式略显繁琐，也可以用更简洁的工厂函数实现同样的效果：

import { ref } from 'vue'
import { defineStore } from 'pinia'

function createStore(storeName) {
  return defineStore(storeName, () => {
    const objects = ref([])

    function addObject(info) {
      objects.value.push(info)
    }

    return { objects, addObject }
  })
}

// 直接生成并导出Store
export const useTeamStore = createStore('team')
export const useUserStore = createStore('user')
export const useProductStore = createStore('product')
export const useOrderStore = createStore('order')
export const useCartStore = createStore('cart')

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