getters 是 vuex 中用于派生加工状态的工具，类似计算属性，不修改 state 而是基于 state 或其他 getters 封装、过滤、映射或组合数据；支持传参、模块化访问及多种调用方式，适用于过滤、统计、格式化和权限判断等场景，需遵守同步、无副作用、不可变等规范。
Getters 是 Vuex 中用于从 store 中派生出经过加工处理的状态的工具，类似 Vue 组件中的计算属性（computed）。它不直接修改状态，而是基于 state 或其他 getters 进行封装、过滤、映射或组合，让组件能以更语义化、复用性更强的方式读取数据。
定义 Getters：在 store 中声明加工逻辑
在 Vuex store 的 getters 选项中，以函数形式定义。每个 getter 接收 state 作为第一个参数，还可接收其他 getters（第二个参数）以及 rootState（模块化场景下）。
- 基础写法：返回一个纯函数，只依赖 state，避免副作用
- 支持传参：通过返回函数实现（如
getTodoById: (state) => (id) => state.todos.find(t => t.id === id)） - 模块化时，局部 getter 默认只能访问本模块的 state 和 getters；需访问全局状态，可解构 { rootState } 或使用 rootGetters
在组件中使用 Getters：三种常用方式
推荐优先使用 mapGetters 辅助函数，保持代码简洁且响应式。
-
对象写法：适合重命名，例如
mapGetters({ doneCount: 'todos/doneCount' })，模板中直接用{{ doneCount }} -
数组写法：适合直接映射同名 getter，例如
mapGetters(['activeCount', 'hasTodos']) -
组合式 API（setup）：配合
useStore+computed，如const doneCount = computed(() => store.getters['todos/doneCount'])
Getters 的典型应用场景
不是所有状态都需要 getter，但以下情况强烈建议使用：
-
过滤与筛选：比如
doneTodos: state => state.todos.filter(t => t.done) -
统计计算：如
todoCount: state => state.todos.length、completedRate: (state, getters) => getters.doneTodos.length / state.todos.length || 0 - 格式化展示：如将时间戳转为“YYYY-MM-DD”，或金额加千分位
-
权限判断：如
canEdit: (state) => state.user.role === 'admin'，便于在多个组件中复用权限逻辑
注意事项：性能与规范
Getters 是响应式的，但要注意两点：
- 避免在 getter 中执行异步操作或触发 commit/dispatch —— 它只应是同步的派生逻辑
- 不要在 getter 中修改 state，否则破坏响应式追踪，也违背单向数据流原则
- 复杂逻辑可拆分为多个小 getter，再组合使用，提升可读性和可测试性
- 如果某个 getter 被频繁调用且计算开销大，可借助 memoization（如 lodash.memoize），但通常 Vue 的响应式系统已足够高效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
