mapState的实现

首先,vuex暴露的就是这些接口,export default {Store, install, mapState, mapMutations, mapGetters, mapActions,createNamespacedHelpers} ,看看mapState的实现方式
1.mapState源码中,有一个函数normalizeMap,它的源码如下

function normalizeMap (map) {
return Array.isArray(map)? map.map(key => ({key,val:key})) : Object.keys(map).map(key => ({key,val:map[key]}))
}
这个函数实现方式比较简单,通过判断参数map是数组还是对象,按照不同的格式输出。
例如数组输入:

normalizeMap([‘one’,‘two’]) 输出结果为
[
{key:‘one’,val:‘one’},
{key:‘two’,val:‘two’}
]
对象传入:

normalizeMap({
count: state => state.count,
countAlias: ‘count’
})
输出结果为:
[
{
key:state,
val:state => state.count
},
{
key:countAlias,
val:‘count’
}
]
2.弄清楚了normalizeMap方法,再来看看mapState方法

export function mapState(state) {
const res = {};
normalizeMap(state).forEach(({key, val}) => {
res[key] = function mappedState(){
return typeof val === ‘function’?
val.call(this, this. s t o r e . s t a t e , t h i s . store.state, this. store.state,this.store.getters):this.KaTeX parse error: Expected 'EOF', got '}' at position 22: …state[val] }̲ }) return …store.state[val]
例如:

import {mapState} from 'vuex
const state = {
count:0
}/
省略vuex的配置
/
export default{
data() {
return {
localCount:10
}
}
},
computed: mapState({
countLocalValue (state) {
return state.count + this.localCount
}
})
经过normalizeMap方法后,返回的数组为

[
{
key:‘countLocalValue’,
val:function(state) {
return state.count + this.localCount
}
}
]
再经过mapState,返回res,最终return出来的结果是:

computed:{
countLocalValue:function mappedState(){
return this.$store.state.count + this.localCount
}
}
这不就是我们的计算属性的写法吗?现在终于清楚了mapState的处理方法,顺便把mapMutations,mapActions看了下,差不多。说到根本上,就是一个语法糖。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值