getters 是 vuex/pinia 中响应式、缓存的派生数据计算函数，用于过滤、汇总、组合 state 或支持参数化查询，提升复用性与可维护性。
计算属性 getters 是 Vuex 或 Pinia 中对 store 数据进行二次加工的核心方式，它不改变原始状态，只提供按需过滤、组合或格式化的派生数据。
理解 getters 的本质作用
getters 类似于 Vue 组件中的 computed，是响应式的、缓存的函数。当依赖的状态变化时，getter 自动重新求值；若依赖未变，直接返回缓存结果，避免重复计算。
它适合做这些事：
- 从列表中筛选满足条件的项（如“未完成的任务”）
- 对数值型状态做汇总（如“购物车总金额”“已读消息数”）
- 将多个 state 字段组合成新结构（如“用户全名 = firstName + lastName”）
- 根据参数动态返回不同结果（需返回函数）
基础写法：无参 getter 过滤列表
以 Vuex 为例，在 store/modules/todos.js 中定义：
const state = {
list: [
{ id: 1, text: '学 Vuex', done: false },
{ id: 2, text: '写 demo', done: true },
{ id: 3, text: '加 loading', done: false }
]
}
const getters = {
// 返回所有未完成任务
undoneTasks: state => state.list.filter(task => !task.done),
// 返回已完成数量
doneCount: state => state.list.filter(t => t.done).length,
// 组合字段
summary: state => `共 ${state.list.length} 条，已完成 ${state.list.filter(t => t.done).length} 条`
}
组件中使用：this.$store.getters.undoneTasks 或通过 mapGetters 辅助函数导入。
进阶技巧：带参数的 getter 实现灵活过滤
如果需要按类型、关键词等动态过滤，getter 必须返回一个函数：
const getters = {
// 按状态筛选任务
tasksByStatus: state => status =>
state.list.filter(task => task.done === (status === 'done')),
// 按关键词搜索
searchTasks: state => keyword =>
state.list.filter(task => task.text.includes(keyword))
}
组件中调用：this.$store.getters.tasksByStatus('done') 或 this.$store.getters.searchTasks('Vuex')。
⚠️ 注意：带参数的 getter 不会自动缓存多组参数结果（Vue 3 + Pinia 支持 memoization，Vuex 需自行封装或配合 lodash.memoize）。
与组件 computed 联动提升可维护性
不要在模板里直接写复杂表达式。把过滤逻辑收口到 getter，组件只负责消费：
// ✅ 推荐：逻辑在 store，视图干净
computed: {
activeTasks() {
return this.$store.getters.undoneTasks
}
}
// ❌ 避免：逻辑散落在模板或组件内
// v-for="task in $store.state.todos.list.filter(t => !t.done)"
这样既利于单元测试，也方便多组件复用同一过滤规则。
