getter是vuex中类似计算属性的派生状态工具，支持属性访问（缓存）和方法访问（不缓存）两种方式；需避免非响应式操作、深层遍历及依赖外部值；推荐用mapgetters简化调用，并分层设计以提升复用性与缓存效率。
Getter 就是 Vuex 中的“计算属性”，核心价值在于把状态转换逻辑从组件中抽离，集中管理、复用、缓存。它不是简单封装函数，而是依托 Vue 响应式系统实现按需更新和智能缓存——用对了，性能不输原生 computed；用错了，反而拖慢渲染。
明确 getter 的两种访问方式与缓存行为
这是性能控制的关键前提：
-
属性访问（推荐多数场景）：如
store.getters.doneTodos。结果会被 Vue 响应式系统缓存，仅当所依赖的 state 或其他 getter 发生变化时才重新执行，适合过滤、映射、统计等纯派生操作。 -
方法访问（按需传参专用）：如
store.getters.getTodoById(5)。每次调用都重新执行，不缓存，适合基于 ID 查找、动态条件筛选等需要参数的场景。
避免常见性能陷阱
缓存 ≠ 绝对安全，这些写法会让 getter 失去优化意义：
- 在 getter 内部直接调用非响应式方法（如
Date.now()、Math.random()），导致结果不可预测且无法缓存； - 深层遍历大数组或对象（如
state.items.map(...).filter(...).reduce(...)套多层），尤其在 getter 被高频引用时，CPU 开销明显； - 无意中让 getter 依赖了未被 Vue 响应式追踪的值（比如外部变量、this 指向错误、或使用了非 reactive 的第三方数据结构）。
配合 mapGetters 提升可读性与维护性
不用手写冗长的 this.$store.getters.xxx，用辅助函数保持代码简洁：
- 数组写法（快捷映射同名）：
mapGetters(['doneTodosCount', 'activeIds'])； - 对象写法（自定义别名）：
mapGetters({ count: 'doneTodosCount' })，在模板中直接用{{ count }}； - 搭配展开运算符，自然融入组件 computed：
computed: { ...mapGetters(['doneTodos']), otherProp() { return this.doneTodos.length } }。
复杂逻辑建议分层处理
一个 getter 不必包揽所有转换。例如分页列表场景：
- 底层 getter 只做基础过滤：
filteredItems: state => state.items.filter(i => i.status === 'active')； - 上层 getter 基于它再切片：
pagedItems: (state, getters) => { const start = (state.page - 1) * state.pageSize; return getters.filteredItems.slice(start, start + state.pageSize); }； - 这样既复用逻辑，又让缓存粒度更细，state.page 变化只触发 pagedItems 重算，filteredItems 不必重复执行。
