pinia getters 支持响应式、缓存化的动态列表筛选,可通过直接过滤、链式调用其他 getter 或返回参数化函数实现;需注意纯函数约束、this 访问方式及缓存特性。

Pinia Getters 可以通过响应式、缓存化的方式,基于 state 中的过滤条件(如关键词、状态、分类等)对列表进行动态筛选,且结果会随 state 变化自动更新。
基础写法:用 state 直接过滤
最常用方式是定义一个 getter,接收 state 参数,在内部对列表做条件判断和数组操作。例如:
- filteredItems: (state) => state.list.filter(item => item.status === 'active') —— 简单固定值过滤
- searchedItems: (state) => { const kw = state.keyword?.trim(); return kw ? state.list.filter(i => i.name.includes(kw)) : state.list; } —— 支持空关键词兜底
多级依赖:链式调用其他 getter
当过滤逻辑分步骤(比如先按状态筛、再按关键词搜),可拆成多个 getter,后一个通过 this 复用前一个的结果,天然享受缓存优势:
- filteredByStatus: (state) => { return state.statusFilter === 'all' ? state.list : state.list.filter(i => i.status === state.statusFilter); }
- searchedByKeyword(): any[] { const base = this.filteredByStatus; const kw = this.keyword?.trim(); return kw ? base.filter(i => i.title?.includes(kw)) : base; }
注意:第二个 getter 必须用普通函数写法(非箭头函数),才能正确访问 this 和其他 getter。
支持参数的动态过滤:返回函数
如果需要按不同字段或不同值灵活筛选(比如按 type 或 category),可用“getter 返回函数”的方式:
- filterBy: (state) => (field: string, value: any) => state.list.filter(item => item[field] === value)
- 使用时:store.filterBy('status', 'draft'),每次调用都基于当前 state 实时计算
- 适合组件内传入 props 或 ref 值驱动的场景,但注意:该函数执行结果不被 Pinia 缓存,高频调用需自行节流或 memoize
性能与规范提醒
为确保过滤高效稳定,建议:
- 避免在 getter 内发起请求、修改 state 或调用 action —— getter 应保持纯函数特性
- 不直接返回新对象引用(如 { ...item }),否则会破坏响应式依赖追踪
- 复杂过滤逻辑(如全文搜索、模糊匹配)可封装到工具函数中,getter 内只做调用,便于测试和复用










