道招

从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实现自己封装的方法也能支持多种参数,它带来了下列好处:

  1. 让用户使用的时候感觉很爽,支持比较灵活的传参方式 2.自己在封装方法时后续代码的不用动不动就判断传参是对象还是数组,使得代码的可维护性更强

这里我想强调一下的是在数据归一化的时候不要失真,比如这里我们可以把数组参数['count']变成对象参数{key: 'count', val: 'count'},而不是反过来,不然{page: 'currentPage'}怎么办,变成['page']?这样就失真了啊,缺失了currentPage了,虽然你在入参传入的对象里面根据page的key还是能拿到currentPage这个value的,但是这样写法就不优雅,耦合性较强了。

更新时间:
上一篇:走到N层台阶有多少种走法下一篇:pixel 3A (XL ) android P root教程Magisk

相关文章

vuex的mapState mapActions mapMutations mapGetters在模块module使用详解

我们使用主要是为了简洁自己的代码, 没用这些方法之前我们的代码可能是这样的(这里用使用了modules的来举例子,没有module的使用更简单,这里的module为pim),mutation和acti 阅读更多…

vuex的mapState mapActions mapMutations mapGetters在模块module使用详解

我们使用主要是为了简洁自己的代码, 没用这些方法之前我们的代码可能是这样的(这里用使用了modules的来举例子,没有module的使用更简单,这里的module为pim),mutation和acti 阅读更多…

关注道招网公众帐号