pinia getters 天然缓存,基于 vue 响应式系统封装 computed;无参 getter 自动追踪依赖并缓存结果,带参 getter 需返回函数,缓存函数而非结果,需手动实现参数级缓存。

基础写法:无参 getter 自动缓存
最常用也最安全的形式,Pinia 会完整追踪其依赖并缓存结果:
-
函数式写法:直接返回派生值,如
fullName: (state) => `${state.firstName} ${state.lastName}` -
this 式写法:适合复用其他 getter,如
activeCount() { return this.activeItems.length },其中activeItems也是 getter,调用时自动享受双重缓存
带参数的 getter:缓存的是“函数”,不是“结果”
要实现动态筛选(比如按 status 查任务),必须返回一个函数:
- 正确写法:
tasksByStatus: (state) => (status) => state.tasks.filter(t => t.status === status) - 调用方式:
store.tasksByStatus('done'),每次调用都会执行内部逻辑 - 注意:Pinia 不为不同
status值分别缓存结果;若需按参数缓存(如查用户 ID),得配合Map或lodash.memoize手动实现
保持缓存有效的三个要点
缓存不是“一直有效”,它依赖响应式依赖的稳定性:
- 避免在 getter 内部读取非响应式值,例如
Date.now()、Math.random()或普通对象属性,否则每次访问都视为“可能变化”,破坏缓存 - 不要返回新引用,如
() => ({ ...state.obj })或() => [...state.list],组件会因引用不同而误触发更新 - 复杂逻辑建议拆成多个小 getter,例如先
filteredTasks,再filteredCount,Pinia 可分别缓存中间结果,提升整体效率
和组件配合:让缓存真正起作用
模板中别写内联表达式,把逻辑收进 getter,组件只消费结果:
- Store 中定义:
hasActiveTasks: (state) => state.tasks.some(t => t.active) - 组件中解构:
const { hasActiveTasks } = storeToRefs(store) - 模板里直接用:
<div v-if="hasActiveTasks">有进行中的任务</div>,语义清晰,复用方便,缓存自然生效










