vuex中的Getter如何用

# Vuex中的Getter如何用

## 一、Getter 是什么？

在 Vuex 中，**Getter** 是用于从 Store 中派生出状态的计算属性。类似于 Vue 组件中的 `computed` 属性，Getter 可以对 Store 中的状态进行二次处理，返回新的计算结果，而不会直接修改原始状态。

### 核心特点：
1. **派生状态**：基于 Store 的 state 计算新值
2. **高效缓存**：只有当依赖值变化时才重新计算
3. **组件复用**：多个组件可以共享同一套计算逻辑

---

## 二、基本用法

### 1. 定义 Getter
在 Vuex Store 中通过 `getters` 选项定义：

```javascript
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '学习Vuex', done: true },
      { id: 2, text: '实践Getter', done: false }
    ]
  },
  getters: {
    // 基本Getter
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    
    // 带参数的Getter
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  }
})

2. 组件中访问

在 Vue 组件中有三种访问方式：

方式一：通过 this.$store

computed: {
  doneTodos() {
    return this.$store.getters.doneTodos
  }
}

方式二：mapGetters 辅助函数

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'doneTodos',
      'getTodoById'
    ]),
    
    // 重命名
    ...mapGetters({
      myTodos: 'doneTodos'
    })
  }
}

方式三：直接调用带参数的Getter

this.$store.getters.getTodoById(2)

三、高级用法

1. Getter 组合

Getter 可以依赖其他 Getter：

getters: {
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

2. 返回函数实现传参

通过返回函数的方式实现动态查询：

getters: {
  getTodoByText: (state) => (text) => {
    return state.todos.find(todo => todo.text.includes(text))
  }
}

3. 模块化中的命名空间

在模块中使用时，需要添加命名空间前缀：

computed: {
  ...mapGetters('moduleName', [
    'someGetter'
  ])
}

四、最佳实践

1. 何时使用 Getter？

• 需要从 store 中的 state 派生状态时
• 多个组件需要相同计算逻辑时
• 需要进行复杂的数据过滤/处理时

2. 性能优化

• 避免在 Getter 中进行耗时计算
• 对于大数据集考虑使用缓存策略
• 必要时使用 memoization 技术

3. 测试建议

Getter 应该是纯函数，易于单元测试：

// 测试示例
describe('getters', () => {
  it('doneTodos returns completed todos', () => {
    const state = {
      todos: [
        { id: 1, done: true },
        { id: 2, done: false }
      ]
    }
    expect(getters.doneTodos(state)).toEqual([{ id: 1, done: true }])
  })
})

五、常见问题

Q1: Getter 和 computed 有什么区别？

Q2: 为什么 Getter 不直接修改 state？

这是 Vuex 的核心设计原则，保持状态变更的可追踪性，所有修改必须通过 mutations。

Q3: 如何处理异步操作？

Getter 应该是同步的，异步操作应该放在 actions 中处理。

六、总结

Vuex Getter 是状态管理的重要工具，它： 1. 提供可复用的派生状态计算 2. 保持组件与状态结构的解耦 3. 通过缓存机制优化性能 4. 使复杂状态访问更加规范化

合理使用 Getter 可以让你的 Vuex 代码更加清晰、可维护性更高。建议将业务相关的状态计算都封装为 Getter，而不是分散在各个组件中。

提示：在 Vue 3 的 Pinia 中，Getter 的概念被简化为 computed 属性，使用起来更加直观。 “`

（全文约1200字，可根据需要调整具体示例或补充更多使用场景）