将vuex中的getters中转换为计算属性

如何将getters转换为计算属性，不用再写重复代码，直接使用？

步骤1、导入mapGetters
mapGetters的作用就是将getters中的方法转换为计算属性
mapGetters是vuex中的工具方法

import {mapGetters} from 'vuex' //mapGetters的作用是可以将getters中的方法转换为计算属性

步骤2、在computed:{}配置要转换的方法
有两种配置方法
第一种如下

 ...mapGetters(['cartLength','xxx','xxxx'])
//cartLength为getters.js中定义的方法名
使用的时候，直接在{{}}中使用
<div slot="center">购物车({{cartLength}})</div>

第二种方法，可以通过配置对象，定义使用的别名

...mapGetters({
      length:'cartLength'
    })

使用时，可以直接使用length，相当于调用getters.js中的cartLength方法
<div slot="center">购物车({{length}})</div>

备注：getters.js中的方法参考如下

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