脚本宝典收集整理的这篇文章主要介绍了

关于一些Vue的文章。(1)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

原文链接我的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 = {}) {
        // 其他代码
    }

完。


总结

以上是脚本宝典为你收集整理的

关于一些Vue的文章。(1)

全部内容,希望文章能够帮你解决

关于一些Vue的文章。(1)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过