Pinia Getters

Pinia Getters

Pinia Getters 是 Pinia 状态管理库中用于定义派生状态（computed state）的核心功能。它们类似于组件中的计算属性（computed properties），但作用在存储（store）级别，允许开发者从现有状态派生出新的数据，同时保持响应式特性。

核心概念

Getters 是存储（store）中的特殊函数，具有以下特性：

• 基于现有状态（state）或其他 getters 计算新值
• 自动缓存计算结果（类似 Vue 的计算属性）
• 可通过 this 访问整个存储实例
• 支持传递参数（通过返回函数的方式）

基本语法

在 Pinia 中定义 getter 有两种方式：

1. 属性风格（推荐）：

export const useStore = defineStore('storeId', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

2. 方法风格（需要访问其他 getters 时）：

getters: {
  doubleCountPlusOne() {
    return this.doubleCount + 1 // 访问其他 getter
  }
}

参数化 Getters

Getters 可以通过返回函数的方式接受参数：

getters: {
  multiplyBy: (state) => (factor) => state.count * factor
}
// 使用：store.multiplyBy(3)

类型推断（TypeScript）

Pinia 为 getters 提供完整的类型推断：

interface State {
  count: number
}

interface Getters {
  doubleCount: number
  multiplyBy: (factor: number) => number
}

实际应用示例

电商购物车场景：

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [
      { id: 1, name: 'Vue T-shirt', price: 25, quantity: 2 },
      { id: 2, name: 'Pinia Mug', price: 15, quantity: 1 }
    ]
  }),
  getters: {
    totalItems: (state) => state.items.reduce((sum, item) => sum + item.quantity, 0),
    totalPrice: (state) => state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0),
    getProductById: (state) => (id) => state.items.find(item => item.id === id)
  }
})

使用示例：

const cart = useCartStore()
console.log(cart.totalItems) // 输出: 3
console.log(cart.totalPrice) // 输出: 65 (25*2 + 15*1)
console.log(cart.getProductById(1)) // 输出: { id:1, name:'Vue T-shirt',... }

性能优化

Pinia getters 具有自动缓存机制：

• 只有当依赖的状态改变时才会重新计算
• 多次访问同一个 getter 不会重复计算
• 可通过 store.$reset() 清除缓存

与 Vuex Getters 对比

特性	Pinia	Vuex
更简洁，类似组件计算属性 | 需要定义在 getters 对象中
一流的 TypeScript 支持 | 需要额外类型声明
原生支持 | 需要通过 mapGetters
通过返回函数 | 通过返回函数

高级模式

1. 跨存储访问：

getters: {
  combinedData() {
    const otherStore = useOtherStore()
    return this.someState + otherStore.someValue
  }
}

2. 异步 Getters（不推荐，应考虑使用 actions）：

async getters: {
  async getUserData() {
    const response = await fetch('/api/user')
    return response.json()
  }
}

最佳实践

• 保持 getters 纯净（无副作用）
• 复杂计算应分解为多个简单 getters
• 对于频繁变化的派生状态，考虑使用 memoization 库
• 避免在 getters 中修改状态（应使用 actions）

可视化数据流

graph LR A[State] --> B[Getter] B --> C[Component] C --> D[User Interaction] D --> E[Action] E --> A

数学表达

对于计算总价的 getter 可以用数学公式表示为： $\text{totalPrice}=\sum _{i=1}^n({\text{item}}_i.\text{price}\times {\text{item}}_i.\text{quantity})$

常见问题

Q: Getter 和 Action 有什么区别？

• Getter：用于计算派生数据（只读）
• Action：用于封装业务逻辑（可修改状态）

Q: 为什么我的参数化 getter 不更新？ 确保你是在调用函数而不是直接引用：

// 错误：const value = store.paramGetter
// 正确：const value = store.paramGetter(arg)

总结

Pinia Getters 提供了一种高效的方式来管理和计算派生状态，它们：

• 保持响应式
• 自动缓存结果
• 支持灵活的参数传递
• 与 TypeScript 完美集成
• 可以跨存储组合使用

掌握 Getters 是构建可维护、高效 Vue.js 应用的关键步骤，特别是在处理复杂状态逻辑时能显著提升代码的可读性和性能。