Vuex的原始碼分析

mapstate

import  from 'vuex'
export default 
})}

經過 mapstate 函式呼叫後的結果，如下所示：

import  from 'vuex'
export default ,
countalias() ,
countpluslocalstate() 
}}

再看一下 mapstate 引數為陣列的例子：

computed: mapstate([
// 對映 this.count 到 this.$store.state.count
'count'
])經過 mapstate 函式呼叫後的結果，如下所示：
computed: 
}

mapgetters

mapgetters 工具函式會將 store 中的 getter 對映到區域性計算屬性中。它的功能和 mapstate 非常類似，我們來直接看它的實現：

export
function mapgetters (getters) 
normalizemap(getters).foreach
(() => `)
}return
this.$store.getters[val]}})
return
res}

mapgetters 的實現也和 mapstate 很類似，不同的是它的 val 不能是函式，只能是乙個字串，而且會檢查 val in this.$store.getters 的值，如果為 false 會輸出一條錯誤日誌。為了更直觀地理解，我們來看乙個簡單的例子：

import  from 'vuex'
export default 
}

經過 mapgetters 函式呼叫後的結果，如下所示：

import  from 'vuex'
export default ,
anothergetter() 
}}

再看乙個引數 mapgetters 引數是物件的例子：

computed: mapgetters()
經過 mapgetters 函式呼叫後的結果，如下所示：
computed: 
}

mapactions

mapactions 工具函式會將 store 中的 dispatch 方法對映到元件的 methods 中。和 mapstate、mapgetters 也類似，只不過它對映的地方不是計算屬性，而是元件的 methods 物件上。我們來直接看它的實現：

export function
mapactions
(actions) 
normalizemap(actions).foreach(() => 
})return res
}

可以看到，函式的實現套路和 mapstate、mapgetters 差不多，甚至更簡單一些，實際上就是做了一層函式包裝。為了更直觀地理解，我們來看乙個簡單的例子：

import  from 'vuex'
export default )
}}

經過 mapactions 函式呼叫後的結果，如下所示：

import  from 'vuex'
export default 
add(...args) 
}}

mapmutations

mapmutations 工具函式會將 store 中的 commit 方法對映到元件的 methods 中。和 mapactions 的功能幾乎一樣，我們來直接看它的實現：

export function
mapmutations
(mutations) 
normalizemap(mutations).foreach(() => 
})return res
}

函式的實現幾乎也和 mapactions 一樣，唯一差別就是對映的是 store 的 commit 方法。為了更直觀地理解，我們來看乙個簡單的例子：

import  from 'vuex'
export default )
}}

經過 mapmutations 函式呼叫後的結果，如下所示：

import  from 'vuex'
export default 
add(...args) 
}}

**部落格：