从mapState、mapMutations的源码看数据归一化normalize
从mapState、mapMutations的源码看数据归一化normalize
很多同学应该都知道mapState
有以下三种写法:
不知道的童鞋可以查看本博客的《vuex的mapState mapActions mapMutations mapGetters在模块module使用详解》
export default {
computed: {
...mapState('pim', {
count: state => state.count, // 1
page: 'currentPage', // 2
}),
...mapState('pim', ['total']) // 3
}
它是怎么实现的呢?让人用起来很灵活啊。
先看看mapState
的源码
var mapState = normalizeNamespace(function (namespace, states) {
var res = {};
normalizeMap(states).forEach(function (ref) {
var key = ref.key;
var val = ref.val;
res[key] = function mappedState () {
var state = this.$store.state;
var getters = this.$store.getters;
if (namespace) {
var module = getModuleByNamespace(this.$store, 'mapState', namespace);
if (!module) {
return
}
state = module.context.state;
getters = module.context.getters;
}
return typeof val === 'function'
? val.call(this, state, getters)
: state[val]
};
// mark vuex getter for devtools
res[key].vuex = true;
});
return res
});
里面主要做数据归一化的是normalizeMap
方法
function normalizeMap (map) {
return Array.isArray(map)
? map.map(function (key) { return ({ key: key, val: key }); })
: Object.keys(map).map(function (key) { return ({ key: key, val: map[key] }); })
}
最终不会是数组还是对象的参数转为类似下面的数组
[{
key: 'count',
val: (state) => state.count
},{
key: 'page',
val: 'currentPage'
},{
key: 'total',
val: 'total'
}]
然后我们就可以按照数组来处理了,所以源码里面可以直接用forEach
了。
具体mapState
的使用及源码分析就不讲了,《vuex的mapState mapActions mapMutations mapGetters在模块module使用详解》里面介绍的很详情。
我们这里要学习的是这种写法,通过数据归一化normalize实现自己封装的方法也能支持多种参数,它带来了下列好处:
- 让用户使用的时候感觉很爽,支持比较灵活的传参方式 2.自己在封装方法时后续代码的不用动不动就判断传参是对象还是数组,使得代码的可维护性更强
这里我想强调一下的是在数据归一化的时候不要失真
,比如这里我们可以把数组参数['count']
变成对象参数{key: 'count', val: 'count'}
,而不是反过来,不然{page: 'currentPage'}
怎么办,变成['page']
?这样就失真了啊,缺失了currentPage
了,虽然你在入参传入的对象里面根据page
的key还是能拿到currentPage
这个value的,但是这样写法就不优雅,耦合性较强了。
- 分类:
- Web前端
相关文章
vuex的mapState mapActions mapMutations mapGetters在模块module使用详解
我们使用主要是为了简洁自己的代码, 没用这些方法之前我们的代码可能是这样的(这里用使用了modules的来举例子,没有module的使用更简单,这里的module为pim),mutation和acti 阅读更多…
vuex的mapState mapActions mapMutations mapGetters在模块module使用详解
我们使用主要是为了简洁自己的代码, 没用这些方法之前我们的代码可能是这样的(这里用使用了modules的来举例子,没有module的使用更简单,这里的module为pim),mutation和acti 阅读更多…