关于一些Vue的文章。（1）

2024年1月12日 167次阅读 来源: 三毛

原文链接我的blog，迎接STAR。

本日分享的一篇文章是关于vuex的源码剖析的，链接vuex源码剖析，在如今所做的项目里的每一个组件，最少都有一个辅佐函数，或者是....mapGetters，或者是...mapActions, 扩大运算符，以及解构也常常用到。这篇文章处置惩罚了搅扰我好久的一个迷惑，为何有时刻辅佐函数内里传的是一个字符串数组，而有的时刻传的是一个对象。也许之前看源码的时刻，没怎么仔细想过把。

实在很简单，vuex底层对传入辅佐函数的参数都进行了一个转化处置惩罚，来看源码（以mapState为例）：

export function mapState (states) {
  const res = {}
  normalizeMap(states).forEach(({ key, val }) => {
    res[key] = function mappedState () {
      return typeof val === 'function'
        ? val.call(this,this.$store.state,this.$store.getters)
        : this.$store.state[val]
    }
  })
  return res
}

mapState,对传入的参数起首挪用normalizeMap要领，来看normalizeMap的源码：

function normalizeMap (map) {
  return Array.isArray(map)
    ? map.map(key => ({ key, val: key }))
    : Object.keys(map).map(key => ({ key, val: map[key] }))
}

对传入的参数先推断是否是数组，假如是数组挪用数组的map要领，转化为{key, val: key} 对象的情势，假如不是数组， （那就是对象），方便对象的key 转化为{key, val: map[key]}对象的情势。
末了返回。

本日还学到了一点，在项目里平常须要取到表单的值， 我平常是这么做的：

    const { userName, password, checked } = this.form

发明本来可以给变量一个初始值

    const { userName, password, checked = [] } = this.form

在进修es6 时，只知道可以给函数的参数给默认值，类似于下面：

    function name (a, b = [], c = {}) {
        // 其他代码
    }

完。

    原文作者：三毛
    原文地址: https://segmentfault.com/a/1190000008933539
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞