vue...mapgetters（vuemapgetters）

## Vue ...mapGetters 详解### 简介在 Vuex 中，`getters` 允许你对 store 中的状态进行派生，类似于计算属性。而 `mapGetters` 辅助函数则是为了方便我们在组件中使用这些 `getters`。它可以将 store 中的 `getters` 映射到组件的计算属性中，简化代码并提高可读性。### 使用步骤1.

引入 `mapGetters`

在需要使用 `mapGetters` 的组件中，从 `vuex` 中引入：```javascriptimport { mapGetters } from 'vuex';```2.

将 `getters` 映射到计算属性

在组件的 `computed` 属性中使用 `mapGetters` 函数，它接受一个数组或对象作为参数：-

数组形式：

数组元素是 `getters` 的名称，映射后的计算属性名与 `getters` 名称相同。```javascriptcomputed: {...mapGetters(['getter1', 'getter2'])}```这会将 `store.getters.getter1` 和 `store.getters.getter2` 映射到组件的计算属性 `getter1` 和 `getter2`。-

对象形式：

对象键是自定义的计算属性名，值是 `getters` 的名称或函数。```javascriptcomputed: {...mapGetters({myGetter1: 'getter1', // 自定义名称myGetter2: (state, getters) => { // 使用函数return getters.getter2 + '!';}})}```这会将 `store.getters.getter1` 映射到 `myGetter1`，并将 `getters.getter2` 的返回值拼接 "!" 后映射到 `myGetter2`。3.

在组件中使用

映射后的计算属性可以直接在模板或其他计算属性/方法中使用，就像普通的计算属性一样：```html```### 优势-

简化代码：

不需要手动编写 `this.$store.getters.xxx` 来访问 `getters`。 -

提高可读性：

清晰地展示了组件依赖哪些 `getters`。 -

易于维护：

当 `getters` 名称发生变化时，只需要修改 `mapGetters` 中的映射关系即可。### 示例

store.js

```javascript export default {state: {count: 0},getters: {doubleCount: state => state.count

2} }; ```

MyComponent.vue

```vue ```在这个例子中，`mapGetters` 将 `store.getters.doubleCount` 映射到了组件的计算属性 `doubleCount`，使得在模板中可以直接使用 `doubleCount` 访问。### 总结`mapGetters` 是一个非常实用的 Vuex 辅助函数，可以帮助我们更方便地使用 `getters`，提高代码质量。

Vue ...mapGetters 详解

简介在 Vuex 中，`getters` 允许你对 store 中的状态进行派生，类似于计算属性。而 `mapGetters` 辅助函数则是为了方便我们在组件中使用这些 `getters`。它可以将 store 中的 `getters` 映射到组件的计算属性中，简化代码并提高可读性。

使用步骤1. **引入 `mapGetters`**在需要使用 `mapGetters` 的组件中，从 `vuex` 中引入：```javascriptimport { mapGetters } from 'vuex';```2. **将 `getters` 映射到计算属性**在组件的 `computed` 属性中使用 `mapGetters` 函数，它接受一个数组或对象作为参数：- **数组形式：** 数组元素是 `getters` 的名称，映射后的计算属性名与 `getters` 名称相同。```javascriptcomputed: {...mapGetters(['getter1', 'getter2'])}```这会将 `store.getters.getter1` 和 `store.getters.getter2` 映射到组件的计算属性 `getter1` 和 `getter2`。- **对象形式：** 对象键是自定义的计算属性名，值是 `getters` 的名称或函数。```javascriptcomputed: {...mapGetters({myGetter1: 'getter1', // 自定义名称myGetter2: (state, getters) => { // 使用函数return getters.getter2 + '!';}})}```这会将 `store.getters.getter1` 映射到 `myGetter1`，并将 `getters.getter2` 的返回值拼接 "!" 后映射到 `myGetter2`。3. **在组件中使用**映射后的计算属性可以直接在模板或其他计算属性/方法中使用，就像普通的计算属性一样：```html```

优势- **简化代码：** 不需要手动编写 `this.$store.getters.xxx` 来访问 `getters`。 - **提高可读性：** 清晰地展示了组件依赖哪些 `getters`。 - **易于维护：** 当 `getters` 名称发生变化时，只需要修改 `mapGetters` 中的映射关系即可。

示例**store.js**```javascript export default {state: {count: 0},getters: {doubleCount: state => state.count * 2} }; ```**MyComponent.vue**```vue ```在这个例子中，`mapGetters` 将 `store.getters.doubleCount` 映射到了组件的计算属性 `doubleCount`，使得在模板中可以直接使用 `doubleCount` 访问。

总结`mapGetters` 是一个非常实用的 Vuex 辅助函数，可以帮助我们更方便地使用 `getters`，提高代码质量。