vuex 中辅助函数 mapGetters 的基本用法详解

简介

在 Vuex 中, state 存储着应用中的单一状态树。可以通过 store.state 来获取状态树中的属性。

但是，在有一些情况下，我们需要从 state 中派生一些状态，例如，过滤一些数据或者对数据进行计算，这时可以使用 Getter。Vuex 可以通过 Getter 快速派生出一些状态数据。

在使用 Getter 这个函数的时候，我们可以通过 mapGetters 这个辅助函数直接在 component 中引用。

mapGetters 的使用

使用方式

在 component 中引入方式如下：

import { mapGetters } from 'vuex'

定义计算属性的对象，从而对 state 进行计算转换。这里我比较习惯去定义一个对象，将计算属性全部包含在这个对象中。

computed: {
  ...mapGetters([
    'showContent',  
    'hideContent'   
  ])
}

这里的 mapGetters 接受一个数组，而数组中每个值经过计算之后，就会包裹在 computed 的对象里面。注意，这里是两个字符串，它们代表的意义在下面会讲述。

mapGetters 示例

这里，我们以一个简单的购物车为例子，讲解 mapGetters 的使用。

购物车大模块

我们在store目录下定义了 cart.js 文件。

// store/cart.js
export default {
  state: {
    cartList: [
      {
        id: 1,
        name: 'apple',
        price: 10,
        quantity: 2
      },
      {
        id: 2,
        name: 'banana',
        price: 15,
        quantity: 3
      }]
  },
  getters: {
    cartCount: state => {
      return state.cartList.reduce((sum, item) => sum + item.quantity, 0)
    },
    cartTotal: state => {
      return state.cartList.reduce((sum, item) => sum + item.price * item.quantity, 0)
    }
  }
}

其中，我们定义了一个 state 与 两个 getter 方法，分别是 cartCount 和 cartTotal。

购物车小模块: Shop.vue

在 Shop 组件中，我们要用到这两个方法，用现代方法引入 mapGetters，如下所示

// components/Shop.vue
import { mapGetters } from 'vuex';
export default {
  name: 'Shopping',
  computed: {
    ...mapGetters([
      'cartCount',
      'cartTotal'
    ])
  }
}

接下来，我们就可以在 template 中直接使用这两个方法了。

// components/Shop.vue
<template>
  <div class="shopping">
    <ul>
      <li v-for="(item, index) in cart" :key="index">
        <div>{{ item.name }}</div>
        <div>{{ item.price }}</div>
        <div>{{ item.quantity }}</div>
      </li>
    </ul>
    <p>已选购数量： {{ cartCount }} 个</p>
    <p>总价： {{ cartTotal }} 元</p>
  </div>
</template>

这里我们可以看到，mapGetters 的基本用法就是：

首先先导入 mapGetters 从 vuex 中

其次，将需要的 getter 方法放到 computed 的对象中，这个时候，它们就像普通的计算属性一样被 Vue 所看待。

在 template 中, 直接像使用 data 中的属性一样，访问我们定义好的 getter。

总结

利用 mapGetters 这个辅助函数可以帮助我们在组件中使用 getter 方法更加的便捷，同时避免了在 component 中书写大量重复模板代码的问题。可以有效提高开发效率。

同时在使用的时候，特别提醒大家，最好是将 getter 放在一个专门的文件夹下管理。这样在使用的时候极为方便。

除此之外，如果你对组件中还有其他的 options，千万不要忘记使用扩展符讲这些是能够平稳输出到 component 中的 computed 选项中。