pinia 通过 getters 实现全局计算属性，基于 state 派生只读、缓存、响应式值，支持依赖追踪、类型推导、异步逻辑及跨 store 调用；需用 storetorefs 解构以保持响应性。
Pinia 本身不提供类似 Vue 组件中 computed 那样的“计算属性”API，但它内置了 getters —— 这就是 Pinia 中专为高效派生全局状态而设计的核心机制，功能和语义完全对标组件内的计算属性。
getters 是 Pinia 的“全局计算属性”
它基于 store 的 state 派生出只读、缓存、响应式的值，自动追踪依赖，仅在依赖变化时重新求值。写法简洁，类型推导精准（尤其在 TypeScript 中），且天然支持异步逻辑（如组合多个异步状态后返回汇总结果）。
- 写在
defineStore的getters选项里，形参是state - 内部可访问整个 store 实例（通过
this），也能调用其他 getter 或 actions - 返回值自动响应式，组件中直接解构使用即可，无需额外包装
典型用法：从 state 派生业务逻辑值
比如管理一个用户列表，需要实时获取“已激活用户数”或“按部门分组的用户统计”：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
export const useUserStore = defineStore('user', {
state: () => ({
list: [] as User[],
filterStatus: 'all' as 'all' | 'active' | 'inactive'
}),
getters: {
// ✅ 基础派生：过滤后的活跃用户
activeUsers: (state) => state.list.filter(u => u.status === 'active'),
// ✅ 组合派生：带条件的计数（自动响应 filterStatus 变化）
filteredCount: (state) => {
if (this.filterStatus === 'all') return state.list.length
return state.list.filter(u => u.status === this.filterStatus).length
},
// ✅ 调用其他 getter
hasActiveUsers: (state) => this.activeUsers.length > 0
}
})
在组件中高效使用 getters
推荐用 storeToRefs 解构，避免破坏响应性：
- 直接解构 getter 会丢失响应式（因为它是普通函数返回值）
-
storeToRefs将 getters 转为 ref，保持响应更新 - 适合搭配
toRef或computed做二次处理
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { filteredCount, hasActiveUsers } = storeToRefs(userStore)
// ✅ 响应式，页面随 store 变化自动刷新
console.log(filteredCount.value)
进阶技巧：getter 中调用 actions 或跨 store 依赖
Getter 支持异步逻辑和跨 store 关联，适合复杂派生场景：
- 在 getter 内部调用
this.fetchData()（需注意副作用和缓存策略） - 导入另一个 store 并读取其 state 或 getter（如
cartStore.totalPrice） - 配合
computed做轻量组合：const summary = computed(() => `${userStore.name} + ${cartStore.items.length}`)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
