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 映射到局部计算属性,
- 引入mapGetters
import { mapGetters } from 'vuex'
- 使用
computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'getShopTotal', 'getShopMoney', ])， 或者 mapGetters({ // 把 `this.shopTotal` 映射为 `this.$store.getters.getShopTotal` shopTotal: 'getShopTotal' }) }
