16.2.2 Vuex中的Getter方法 -TypeScript和Vue从入门到精通(五)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(五)

### 16.2.2 Vuex中的Getter方法

在Vue.js应用中，随着应用复杂度的增加，组件间的状态管理变得尤为关键。Vuex作为Vue.js的官方状态管理模式和库，提供了一种集中存储所有组件共享状态的方式，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex由State、Getters、Mutations、Actions和Modules五个核心部分组成，其中Getters扮演着从Store中派生出一些状态的角色，它们类似于组件的计算属性，但具有更高的可重用性和模块化特性。

#### 16.2.2.1 什么是Getter

在Vuex中，Getter允许组件从Store中获取数据，并可以像计算属性一样对数据进行处理。Getter可以接受state作为第一个参数，并且可以接受其他getters作为第二个参数（在Vuex 4及以上版本中支持）。它们不会修改State，仅仅是基于现有State进行派生状态的计算。与直接访问State相比，Getter的主要优势在于：

- **封装性**：可以将复杂的逻辑封装在Getter内部，使组件代码更加简洁。
- **可重用性**：多个组件可以共享同一个Getter，避免了代码的重复。
- **缓存性**：Vuex的Getter具有缓存能力，当依赖的State没有发生变化时，Getter会返回缓存的结果，提升性能。

#### 16.2.2.2 定义Getter

在Vuex的Store中，Getter是定义在`getters`对象中的一系列函数。每个函数都会接收`state`作为第一个参数（如果启用了命名空间，则还会接收`getters`和`rootState`作为后续参数）。以下是一个简单的Getter示例：

```javascript
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn TypeScript', done: false },
      { id: 2, text: 'Learn Vuex', done: false },
      { id: 3, text: 'Read a book', done: true }
    ]
  },
  getters: {
    // 定义一个名为doneTodos的Getter
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    // 使用箭头函数和参数解构简化
    doneTodosCount: (state) => state.todos.filter(todo => todo.done).length,
    // 访问其他Getter（Vuex 4+）
    remainingTodosCount: (state, getters) => getters.doneTodos.length === state.todos.length ? 0 : state.todos.length - getters.doneTodos.length
  }
});
```

在上述示例中，`doneTodos` Getter用于筛选出所有已完成的待办事项，而`doneTodosCount`则计算这些已完成事项的数量。`remainingTodosCount`则展示了如何使用其他Getter（在这个例子中是`doneTodos`）来进一步派生状态。

#### 16.2.2.3 在组件中使用Getter

在Vue组件中，你可以通过`this.$store.getters`访问到所有的Getter。但是，为了更便捷地在组件中使用这些Getter，Vuex提供了`mapGetters`辅助函数，它可以将store中的getter映射到本地计算属性中。

```vue
<template>
  <div>
    <p>Completed Todos: {{ doneTodos }}</p>
    <p>Remaining Todos: {{ remainingTodosCount }}</p>
  </div>
</template>

export default {
  computed: {
    // 使用对象展开运算符将getter映射为组件的计算属性
    ...mapGetters([
      'doneTodos',
      'remainingTodosCount'
    ])
  }
}
</script>
```

在这个组件中，我们使用了`mapGetters`辅助函数来映射`doneTodos`和`remainingTodosCount`这两个Getter为组件的计算属性。这样，我们就可以在模板中直接访问这些派生状态了。

#### 16.2.2.4 Getter的模块化

当Vuex Store变得复杂时，将其拆分为多个模块是一个很好的做法。在模块化的Vuex Store中，每个模块都可以有自己的`state`、`mutations`、`actions`和`getters`。Getter的模块化使用方式与在全局Store中定义类似，但需要注意命名空间的问题。

在模块化Store中，如果你想要访问其他模块的Getter，可以通过根Getter加上模块名称的方式来实现。例如，如果有一个名为`user`的模块，它有一个名为`isAdmin`的Getter，你可以在另一个模块的Getter中这样访问它：

```javascript
const store = new Vuex.Store({
  modules: {
    user: {
      // ... user module definition
      getters: {
        isAdmin: state => state.user.isAdmin
      }
    },
    anotherModule: {
      getters: {
        // 访问user模块的isAdmin Getter
        canAccess: (state, getters, rootState, rootGetters) => rootGetters['user/isAdmin']
      }
    }
  }
});
```

注意，在模块化Store中，访问其他模块的Getter时，需要使用模块的命名空间（本例中为`'user/'`）来指定。

#### 16.2.2.5 最佳实践与注意事项

- **保持Getter的纯净性**：确保Getter只进行简单的计算或数据转换，不执行任何异步操作或修改State。
- **利用缓存**：Getter的缓存特性可以帮助你优化应用性能，但要注意，当依赖的State发生变化时，Getter会重新计算。
- **模块化与命名空间**：在大型应用中，合理使用Vuex的模块化功能和命名空间可以帮助管理复杂的状态逻辑，避免命名冲突。
- **组件与Getter的解耦**：通过`mapGetters`辅助函数，你可以将Store中的Getter映射为组件的计算属性，从而保持组件与Vuex Store的解耦，提高代码的可维护性和复用性。

总结而言，Vuex中的Getter是状态管理中的一个重要概念，它们提供了从Store中派生出一些状态的能力，使得状态管理更加灵活和高效。通过合理使用Getter，你可以将复杂的逻辑封装起来，提高代码的可读性和可维护性，同时利用Vuex的缓存机制优化应用性能。

该分类下的相关小册推荐：

Vue源码完全解析

Vue.js从入门到精通(四)

移动端开发指南

Vue原理与源码解析

Vue3技术解密

TypeScript和Vue从入门到精通(一)

Vue.js从入门到精通(三)

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(二)

TypeScript和Vue从入门到精通(四)

Vue面试指南

Vue.js从入门到精通(二)