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'
})
}