標籤：

詳解VUEX中的mapGetters

08-11
詳解VUEX中的mapGetters

4 人贊了文章最近想把我們公司的後台管理由 ASP.NET MVC 轉為 SPA，想著 AngularJs的入門陡峭曲線，最終還是決定選用VUE + ElementUI 開發，從 github 上

codeload.github.com/Pan 下了這個模板，

老實說，vue的入門曲線不高，如果結合 webpack ， 那就很高了；

我是一個喜歡刨根問底的傢伙，看到不理解的東東基本上會一直往下挖，例如看到這樣的代碼：

請注意， ...... 表示省略了內容的代碼；不是表示 ES6中的擴展符;

import { mapGetters } from vuex;

computed: {

...mapGetters([

name,

avatar

]),

......

首先申明，本人以前基本上寫ASP.NET MVC,所以對於ES6的語法了解不多。所以如果有什麼理解錯誤，大家海涵；

import { mapGetters } from vuex

這句好理解，無非就是從 vuex 包中引入 mapGetters 進來；

vuex包中定義的 mapGetters函數如下

export const mapGetters = normalizeNamespace((namespace, getters) => {

//注意， normalizeNamespace 對參數進行了預處理，

//所以，(namespace, getters) 只傳入namespace 例如 [name,avatar] 時，

//實際會變為 namespace=, getters=[name,avatar]

const res = {}

//normalizeMap 對 getters 參數進行了轉換，編為 [{key:name,val:name]...形式的數組；

normalizeMap(getters).forEach(({ key, val }) => {

//上面的 forEach 函數，不知道是否是 es6的新語法，

//相當於如下寫法： normalizeMap(getters).forEach(item=>(item.key,item.val)=>...

//即取出數組內每一個元素的 key 和 val 屬性，傳入到 後續函數中；

val = namespace + val

//給 res 增加 key屬性 和對應的取值函數；

res[key] = function mappedGetter () {

if (namespace && !getModuleByNamespace(this.$store, mapGetters, namespace)) {

return

}

if (!(val in this.$store.getters)) {

console.error(`[vuex] unknown getter: ${val}`)

return

}

return this.$store.getters[val]

}

// mark vuex getter for devtools

res[key].vuex = true

})

/* 返回res；res 最終將是一個

{ name:function() { ... return this.$store.getters[name] ...},

avatar:function() { ... return this.$store.getters[avatar]... }

}

的對象

*/

return res

})

/**

這個很簡單，如果參數map是數組，將其轉換為對象數組

{ key:數組元素,val:數組元素}，

* 如果 map 是對象，將其屬性和值編為如下形式的對象：

* { key:屬性名稱,val:屬性值}

*/

function normalizeMap (map) {

return Array.isArray(map)

? map.map(key => ({ key, val: key }))

: Object.keys(map).map(key => ({ key, val: map[key] }))

}

/* 這個函數很簡單，傳入一個函數 fn，該函數接收兩個參數：

* 兩個參數中的第1個參數如果不為字元串，則將其作為第2個參數，

* 第1個參數傳入空字元串，再去調用傳入的函數 fn;

* 如果為字元串，在判斷其最後一個字元是否是/，如果不是/，追加上 /

* 再去調用傳入的函數 fn

*/

function normalizeNamespace (fn) {

return (namespace, map) => {

if (typeof namespace !== string) {

map = namespace

namespace =

} else if (namespace.charAt(namespace.length - 1) !== /) {

namespace += /

}

return fn(namespace, map)

}

}

上面解釋了 mapGetters函數之後，下面就好解釋了：

computed: {

...mapGetters([

name,

avatar

]),

computed: {

/**

mapGetters 函數見下面說明，總之，其將返回：

{ name:function() { ...... return this.$store.getters[name] ......},

avatar:function() { ...... return this.$store.getters[avatar]...... }

......

} 的對象，

... 則用來表示擴展運算符（...）用於取出參數對象的所有可遍歷屬性，並將此屬性和值拷貝到當前對象之中參見這兒 ECMAScript 6入門 ；

於是， mapGetters 返回的對象中的屬性就複製到了 computed 屬性對應的對象中：

*/

...mapGetters([

name,

avatar,

email,

uid,

introduction,

roles

]),

好了，其他的 mapState, mapMutations, mapActions 都是類似的方法，

只是不是從 getters中返回而是分別按照如下定義返回：

return typeof val === function? val.call(this, state, getters): state[val]

return this.$store.commit.apply(this.$store, [val].concat(args))

return this.$store.dispatch.apply(this.$store, [val].concat(args))
推薦閱讀：

TAG:Vuex |