關於一些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 = {}) {
        // 其餘代碼
    }

完。