【Vue】Vuex 從使用到原理分析（下篇）
前言
該系列分爲上中下三篇：vue
- Vuex 從使用到原理分析（上篇）：介紹 Vuex，以及 Vuex 的幾種常見寫法；
- Vuex 從使用到原理分析（中篇）：分析 Vuex 的初始化以及模塊獲取安裝；
- Vuex 從使用到原理分析（下篇）：分析 Vuex 和 Store 中的一些方法包括輔助函數；
在前面咱們尚未分析 store 是怎樣提交 mutaion，怎樣分發 dispatch 的呢？這篇就是對這些方法以及 4 個輔助函數進行分析。vuex
1. commit
commit 方法是惟一容許提交 mutaion 來修改 state 的途徑，它定義在store.js裏：數組
commit (_type, _payload, _options) {
const {
type,
payload,
options
} = unifyObjectStyle(_type, _payload, _options)
const mutation = { type, payload }
const entry = this._mutations[type]
if (!entry) {
if (process.env.NODE_ENV !== 'production') {
console.error(`[vuex] unknown mutation type: ${type}`)
}
return
}
this._withCommit(() => {
entry.forEach(function commitIterator (handler) {
handler(payload)
})
})
// ...不重要代碼
}
複製代碼
在前面咱們記得commit與dispatch方法是有多種傳參寫法的，因此這裏第一步就是整合咱們所須要的參數，獲取到 type、payload、與 options。app
從store._mutations上獲取 type 對應的回調函數，若是沒有找到，則在開發環境拋出錯誤，最後經過_withCommit來執行 entry 裏的函數來執行 mutations 裏的函數修改 state。異步
2. dispatch
dispatch前半部分與commit相同，獲取 type 與 payload 而後從store._actions上拿到咱們定義的 actions 裏的回調函數。函數
dispatch (_type, _payload) {
// check object-style dispatch
const {
type,
payload
} = unifyObjectStyle(_type, _payload)
const action = { type, payload }
const entry = this._actions[type]
if (!entry) {
if (process.env.NODE_ENV !== 'production') {
console.error(`[vuex] unknown action type: ${type}`)
}
return
}
// 下面省略了一些代碼，至關於結果以下代碼
return entry.length > 1
? Promise.all(entry.map(handler => handler(payload)))
: entry[0](payload)
}
複製代碼
因爲咱們 actions 裏的方法返回的是 Promise，因此在 map 後用 Promise.all 來異步執行，而後 return 結果。post
3. mapState
在上篇的使用講解中，咱們知道mapState能夠幫助咱們在組件中更好的獲取 state 裏的數據，mapState定義在helpers.js中：學習
export const mapState = normalizeNamespace();
複製代碼
一開始就是執行了normalizeNamespace方法，咱們先來看一下：ui
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)
}
}
複製代碼
這個函數就是對命名空間的一層封裝，若是有字符串型的命名空間，則把命名空間格式化成 '/moduleA' 的形式，不然就將參數後移，置空第一個參數（命名空間），再返回回調函數執行的結果。this
export const mapState = normalizeNamespace((namespace, states) => {
const res = {}
normalizeMap(states).forEach()
return res
})
複製代碼
噢，這裏又來了一個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, value }] 的形式，例如：
- [1, 2] => [ { key: 1, value: 1 }, { key: 2, value: 2 } ]
- { a: 1, b: 2 } => [{ key: 'a', value: 1 }, { key: 'b', value: 2 }]
爲何會有這一步，由於咱們在 computed 裏定義 mapState() 的時候，有下面兩種寫法：
// 第一種
...mapState({
countAlias: 'count',
count: state => state.count,
}),
// 第二種
...mapState([
'count',
]),
複製代碼
因此纔有須要格式化參數的這一步。
接下來繼續看：
export const mapState = normalizeNamespace((namespace, states) => {
const res = {}
normalizeMap(states).forEach(({ key, val }) => {
res[key] = function mappedState () {
let state = this.$store.state
let getters = this.$store.getters
if (namespace) {
const module = getModuleByNamespace(this.$store, 'mapState', namespace)
if (!module) {
return
}
state = module.context.state
getters = module.context.getters
}
return typeof val === 'function'
? val.call(this, state, getters)
: state[val]
}
// mark vuex getter for devtools
res[key].vuex = true
})
return res
})
複製代碼
經過遍歷格式化後的參數數組，給 res[key] 設置上 mappedState 函數，這個函數主要對 state、getters 設置正確的值（主要是是否有命名空間）。若是 val 是函數，則在此處執行，若是是非函數，則直接從 state 上取值。而後返回這個結果，最後返回 res 這個對象，因此咱們在組件中使用的時候能夠直接在computed裏經過擴展運算符直接擴展到上面。
因此咱們在組件中經過this[key]訪問到的就是this.$store.state[key]或this.$store.state[namespace][key]的值了。
4. mapGetters
export const mapGetters = normalizeNamespace((namespace, getters) => {
const res = {}
normalizeMap(getters).forEach(({ key, val }) => {
// The namespace has been mutated by normalizeNamespace
val = namespace + val
res[key] = function mappedGetter () {
if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) {
return
}
if (process.env.NODE_ENV !== 'production' && !(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
})
return res
})
複製代碼
與mapState相似，也是先定義 res 空對象，而後在 res[key] 上掛載方法，在方法內部判斷命名空間，返回 store 上 getters 對應的值，最後返回這個 res 對象。
5. mapMutations
export const mapMutations = normalizeNamespace((namespace, mutations) => {
const res = {}
normalizeMap(mutations).forEach(({ key, val }) => {
res[key] = function mappedMutation (...args) {
// Get the commit method from store
let commit = this.$store.commit
if (namespace) {
const module = getModuleByNamespace(this.$store, 'mapMutations', namespace)
if (!module) {
return
}
commit = module.context.commit
}
return typeof val === 'function'
? val.apply(this, [commit].concat(args))
: commit.apply(this.$store, [val].concat(args))
}
})
return res
})
複製代碼
前面都同樣，都是格式化參數，而後從 store/module 上拿到 commit 方法，再判斷 val 是否是函數，最終經過 store.commit 方法來修改 state 的值。
6. mapActions
export const mapActions = normalizeNamespace((namespace, actions) => {
const res = {}
normalizeMap(actions).forEach(({ key, val }) => {
res[key] = function mappedAction (...args) {
// get dispatch function from store
let dispatch = this.$store.dispatch
if (namespace) {
const module = getModuleByNamespace(this.$store, 'mapActions', namespace)
if (!module) {
return
}
dispatch = module.context.dispatch
}
return typeof val === 'function'
? val.apply(this, [dispatch].concat(args))
: dispatch.apply(this.$store, [val].concat(args))
}
})
return res
})
複製代碼
與mapMutations幾乎同樣，commit換成了dispatch而已。
7. registerModule
registerModule (path, rawModule, options = {}) {
if (typeof path === 'string') path = [path]
if (process.env.NODE_ENV !== 'production') {
assert(Array.isArray(path), `module path must be a string or an Array.`)
assert(path.length > 0, 'cannot register the root module by using registerModule.')
}
this._modules.register(path, rawModule)
installModule(this, this.state, path, this._modules.get(path), options.preserveState)
// reset store to update getters...
resetStoreVM(this, this.state)
}
複製代碼
看過中篇裏的分析，這個方法就很簡單了。首先是格式化 path 參數，path 能夠傳入字符串和數組，傳數組時是註冊一個帶命名空間的模塊，統一格式化成數組形式。
調用 register 方法 => 安裝模塊 => 初始化 storm._.vm。
8. unregisterModule
unregisterModule (path) {
if (typeof path === 'string') path = [path]
if (process.env.NODE_ENV !== 'production') {
assert(Array.isArray(path), `module path must be a string or an Array.`)
}
this._modules.unregister(path)
this._withCommit(() => {
const parentState = getNestedState(this.state, path.slice(0, -1))
Vue.delete(parentState, path[path.length - 1])
})
resetStore(this)
}
複製代碼
首先也是格式化 path 參數爲數組，而後調用unregister方法，這個方法定義在module/module-collectionjs裏。
unregister (path) {
const parent = this.get(path.slice(0, -1))
const key = path[path.length - 1]
if (!parent.getChild(key).runtime) return
parent.removeChild(key)
}
複製代碼
這個方法就是層層取值，找到該模塊的父模塊，而後從父模塊的 _childrent 對象中移除對應的屬性。
調用unregister後再經過_withcommit方法，將 state 從父模塊的 state 中移除。
最後最後調用resetStore方法重置 store。
function resetStore (store, hot) {
store._actions = Object.create(null)
store._mutations = Object.create(null)
store._wrappedGetters = Object.create(null)
store._modulesNamespaceMap = Object.create(null)
const state = store.state
// init all modules
installModule(store, state, [], store._modules.root, true)
// reset vm
resetStoreVM(store, state, hot)
}
複製代碼
這裏就主要是重置幾個核心概念，而後從新安裝模塊，從新初始化 store._vm。
9. createNamespacedHelpers
export const createNamespacedHelpers = (namespace) => ({
mapState: mapState.bind(null, namespace),
mapGetters: mapGetters.bind(null, namespace),
mapMutations: mapMutations.bind(null, namespace),
mapActions: mapActions.bind(null, namespace)
})
複製代碼
這個函數太簡單了，就是返回一個對象，這個對象包含 4 個傳入了命名空間的輔助函數。
總結
到這裏爲止，整個Vuex的核心概念以及運行原理咱們都已經分析完了。理解了這些，咱們也能更好地在平時開發中定位錯誤，像裏面一些normalizeNamespace、normalizeMap等方法也是咱們能在平時開發中學習使用的。
- 1. 【Vue】Vuex 從使用到原理分析（中篇）
- 2. 【Vue】Vuex 從使用到原理分析（上篇）
- 3. Vuex從使用到原理解析
- 4. 完全搞懂vue之vuex原理篇
- 5. 【Vue】Vuex 的原理
- 6. vue 使用 vuex
- 7. vue vuex使用
- 8. Vuex原理淺析
- 9. Vuex原理解析
- 10. Arouter從使用到原理
- 更多相關文章...
- • Git 分支管理 - Git 教程
- • Wireshark下載安裝和使用教程 - TCP/IP教程
- • Java Agent入門實戰（三）-JVM Attach原理與使用
- • ☆技術問答集錦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【Vue】Vuex 從使用到原理分析（中篇）
- 2. 【Vue】Vuex 從使用到原理分析（上篇）
- 3. Vuex從使用到原理解析
- 4. 完全搞懂vue之vuex原理篇
- 5. 【Vue】Vuex 的原理
- 6. vue 使用 vuex
- 7. vue vuex使用
- 8. Vuex原理淺析
- 9. Vuex原理解析
- 10. Arouter從使用到原理