编辑“︁Pinia Getters”︁

== Pinia Getters ==

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

=== 核心概念 ===
Getters 是存储（store）中的特殊函数，具有以下特性：
* 基于现有状态（state）或其他 getters 计算新值
* 自动缓存计算结果（类似 Vue 的计算属性）
* 可通过 <code>this</code> 访问整个存储实例
* 支持传递参数（通过返回函数的方式）

=== 基本语法 ===
在 Pinia 中定义 getter 有两种方式：

1. 属性风格（推荐）：
<syntaxhighlight lang="javascript">
export const useStore = defineStore('storeId', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2
  }
})
</syntaxhighlight>

2. 方法风格（需要访问其他 getters 时）：
<syntaxhighlight lang="javascript">
getters: {
  doubleCountPlusOne() {
    return this.doubleCount + 1 // 访问其他 getter
  }
}
</syntaxhighlight>

=== 参数化 Getters ===
Getters 可以通过返回函数的方式接受参数：
<syntaxhighlight lang="javascript">
getters: {
  multiplyBy: (state) => (factor) => state.count * factor
}
// 使用：store.multiplyBy(3)
</syntaxhighlight>

=== 类型推断（TypeScript） ===
Pinia 为 getters 提供完整的类型推断：
<syntaxhighlight lang="typescript">
interface State {
  count: number
}

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

=== 实际应用示例 ===
'''电商购物车场景'''：
<syntaxhighlight lang="javascript">
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)
  }
})
</syntaxhighlight>

'''使用示例'''：
<syntaxhighlight lang="javascript">
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',... }
</syntaxhighlight>

=== 性能优化 ===
Pinia getters 具有自动缓存机制：
* 只有当依赖的状态改变时才会重新计算
* 多次访问同一个 getter 不会重复计算
* 可通过 <code>store.$reset()</code> 清除缓存

=== 与 Vuex Getters 对比 ===
{| class="wikitable"
|-
! 特性 !! Pinia !! Vuex
|-
| 语法 | 更简洁，类似组件计算属性 | 需要定义在 getters 对象中
|-
| 类型支持 | 一流的 TypeScript 支持 | 需要额外类型声明
|-
| 组合式 API | 原生支持 | 需要通过 mapGetters
|-
| 参数传递 | 通过返回函数 | 通过返回函数
|}

=== 高级模式 ===
1. '''跨存储访问'''：
<syntaxhighlight lang="javascript">
getters: {
  combinedData() {
    const otherStore = useOtherStore()
    return this.someState + otherStore.someValue
  }
}
</syntaxhighlight>

2. '''异步 Getters'''（不推荐，应考虑使用 actions）：
<syntaxhighlight lang="javascript">
async getters: {
  async getUserData() {
    const response = await fetch('/api/user')
    return response.json()
  }
}
</syntaxhighlight>

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

=== 可视化数据流 ===
<mermaid>
graph LR
    A[State] --> B[Getter]
    B --> C[Component]
    C --> D[User Interaction]
    D --> E[Action]
    E --> A
</mermaid>

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

=== 常见问题 ===
'''Q: Getter 和 Action 有什么区别？'''
* Getter：用于计算派生数据（只读）
* Action：用于封装业务逻辑（可修改状态）

'''Q: 为什么我的参数化 getter 不更新？'''
确保你是在调用函数而不是直接引用：
<syntaxhighlight lang="javascript">
// 错误：const value = store.paramGetter
// 正确：const value = store.paramGetter(arg)
</syntaxhighlight>

=== 总结 ===
Pinia Getters 提供了一种高效的方式来管理和计算派生状态，它们：
* 保持响应式
* 自动缓存结果
* 支持灵活的参数传递
* 与 TypeScript 完美集成
* 可以跨存储组合使用

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

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Pinia状态管理]]