vuex03Getter与mapGetters

Getter是个啥

是个对象，类似于computed里面的对象

如果我们需要对state对象进行做处理计算，比如说，我们有三家超市，我们想计算三家超市的总营业额。同时还要计算实际的收入，假设成本是200。

同时getter还可以接收其他其他getter

const store = new Vuex.Store({
    state: {
        shop1: 100,
        shop2: 200,
        shop3: 300,
    },
    getters: {
        getShopTotal(state) {
            return state.shop1 + state.shop2 + state.shop3
        },
        getShopMoney(state, getters) {
            return getters.getShopTotal - 200
        }
    }
})      

computed: {
    shopTotal() {
      return this.$store.getters.getShopTotal;
    },
    shopMoney() {
      return this.$store.getters.getShopMoney;
    }
  },      

Getter传参

在上面的例子我们可以返现，getter里面其实就是一个属性，我们当然可以让这些属性来接收一个函数。

在上面，我们发现，想计算利润的话需要在里面减去200，如果不同的超市，都想调用这个getter的话，但是成本不是200的話，就需要写好多函数，所以我们考虑getter可以接受参数。

getters: {
     getShopMoney: function (state, getters) {
                return (zhichu) => {
                    return getters.getShopTotal - 200 - zhichu
                }
      }
   }      

computed: {
    shopMoney() {
      return this.$store.getters.getShopMoney(100);
    }
  },      

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性,

1. 引入mapGetters

import { mapGetters } from 'vuex'
      

1. 使用

computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'getShopTotal',
      'getShopMoney',
    ])，
    或者
        mapGetters({
      // 把 `this.shopTotal` 映射为 `this.$store.getters.getShopTotal`
      shopTotal: 'getShopTotal'
    })
  }