如何使用 Vuex 中的mapGetters 辅助函数

https://vuex.vuejs.org/zh/guide/getters.html#mapgetters-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0

• 使用场景：假如你想在某个组件里使用Vuex store 中存储的state的某个属性值，一般的话，我们可以通过计算属性computed: 写一个方法来获取 $store.state.xxx.属性，然后在页面中显示，但是这样有时候会有点麻烦，我们想着可不可以直接使用，不需要再写计算属性，这个时候我们就可以用到mapGetters, 将数据的某些属性放在getters中（比如长度length）将其封装并导出

• 1. 首先 在组件中 导入 mapGetters : import { mapGetters} from ‘Vuex’

  2. 在组件的computed:{}使用 …mapGetters([ “这里面写你在getters中封装的方法” ])

  3. 假如你在getters.js 封装了如下 (cartList 为store中存储的state) ：export

     default {
     
      cartLength(*state*) {
     
       return *state*.cartList.length;
     
      },
     
      cartList(*state*) {
     
       return *state*.cartList;
     
      },
     
     };
     

  4. 组件中

      computed: {
     
       ...mapGetters(["cartLength", "cartList"]),
     
      }
     

  5. 之后你在template中可以直接使用 cartLength,cartList

      <div>{{cartLength}}</div>
     

  6. 如果你想将一个 getter 属性另取一个名字，使用对象形式 然后直接这样使用{{Length}} 就行

     computed: {
     
       ...mapGetters({
     	Length: 'cartLength',
     	List:'cartList'
     }),
     },