Pinia核心概念：定义Store的完整指南

什么是Pinia Store

Pinia作为Vue的官方状态管理库，提供了一种清晰、类型安全的方式来管理应用状态。Store是Pinia的核心概念，相当于一个包含状态和业务逻辑的独立模块。理解如何正确定义Store是使用Pinia的基础。

Store的定义方式

Pinia提供了两种定义Store的方式，类似于Vue的Options API和Composition API风格：

1. 选项式Store (Option Stores)

选项式Store采用对象形式定义，包含三个主要部分：

export const useCounterStore = defineStore('counter', {
  // 状态定义 - 相当于组件的data
  state: () => ({ 
    count: 0,
    name: 'Eduardo'
  }),
  
  // 计算属性 - 相当于组件的computed
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  
  // 操作方法 - 相当于组件的methods
  actions: {
    increment() {
      this.count++
    },
  }
})

特点：

• 结构清晰，适合Vue 2.x迁移项目
• 学习曲线平缓，适合初学者
• 自动推断类型，TypeScript支持良好

2. 组合式Store (Setup Stores)

组合式Store采用函数形式定义，更接近Vue 3的Composition API风格：

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 }
})

特点：

• 灵活性更高，可以使用所有Composition API特性
• 适合复杂业务逻辑的场景
• 可以方便地使用其他Composable
• 需要手动返回所有状态属性

两种方式的对比

特性	选项式Store	组合式Store
语法风格	对象形式	函数形式
状态定义	state选项	ref/reactive
计算属性	getters选项	computed
方法	actions选项	普通函数
类型推断	自动	需要手动类型标注
灵活性	一般	高
学习成本	低	中等

使用Store的最佳实践

1. 命名规范：

   • Store ID应该全局唯一
   • 导出的Store函数建议以use开头，以Store结尾，如useUserStore

2. 文件组织：

   • 每个Store应该放在单独的文件中
   • 建议按功能模块组织Store

3. 在组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()

// 直接访问状态
console.log(store.count)

// 调用action
store.increment()

// 使用getter
console.log(store.doubleCount)
</script>

4. 响应式注意事项：
   • Store本身是响应式的，但直接解构会失去响应性
   • 需要使用storeToRefs保持响应性：

import { storeToRefs } from 'pinia'

const store = useCounterStore()
const { count, doubleCount } = storeToRefs(store)
const { increment } = store // actions可以直接解构

高级技巧

1. 使用全局注入的属性： 组合式Store可以访问应用层提供的(inject)属性：

export const useSearchStore = defineStore('search', () => {
  const route = useRoute()
  const appConfig = inject('appConfig')
  
  // ...
})

2. SSR注意事项：

   • 确保组合式Store返回所有需要SSR的状态
   • 避免在Store中直接使用浏览器API

3. 插件集成：

   • Pinia Store可以方便地与各种插件集成
   • 开发工具会自动识别Store的结构

选择建议

对于大多数场景：

• 新手建议从选项式Store开始
• 需要更高灵活性时使用组合式Store
• 大型项目可以混合使用两种方式

无论选择哪种方式，Pinia都能提供优秀的类型支持和开发体验。理解这两种模式的区别和适用场景，将帮助你更好地组织应用状态管理逻辑。