mapState的实现

约定不等于承诺〃 2022-12-31 02:30 176阅读 0赞

首先，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看了下，差不多。说到根本上，就是一个语法糖。