基於Vuex從零實現本身的Vuez插件-installModule(完結)

在上一節中，咱們已經實現了模塊的收集功能，如今就差咱們的最後一步，安裝模塊...

把子模塊中全部的getters/mutations/actions所有安裝到store中的state/getters/mutations/actions

那麼，咱們來實現一下，這個安裝函數

• 首先，咱們須要明確函數的輸入，也就是函數須要傳入的參數

1. 要安裝哪一個模塊 -->rootModule
2. 安裝到哪裏-->store
3. 跟模塊收集同樣，模塊安裝也是一個遞歸的過程，所以咱們須要一個數組來輔助咱們達到目的。
4. 咱們在把子模塊的state安裝到root module時，會用到state,雖然咱們能夠經過store.state方式進行訪問，但爲了方便起見，這裏仍是直接以參數傳入。 由此，咱們肯定了函數須要要傳入的參數。

• 對於mutations和actions來講，可能存在重名的狀況，因此咱們使用數組進行存儲，即把同名屬性放到數組中

const installModule = (store,state,path,rootModule)=>{
    if(path.length){
        let parent = path.slice(0,-1).reduce((state,current)=>{
            return state[current]
        },state)
        // 將state 轉變成響應式
        Vue.set(parent,path[path.length-1],rootModule.state)
    }
    let getters = rootModule.raw.getters
    if(getters){
       forEach(getters,(key,fn)=>{
           Obejct.defineProperty(store.getters,key,{
               get:()=>{
                    return fn(rootModule.state)   
               }
           })
       })
    }
    let mutations = rootModule.raw.mutations
    if(mutations){
       forEach(mutations,(key,fn)=>{
           let arr = store.mutations[key]||(store.mutations[key]=[])
           arr.push((payload)=>{
               fn(store.state,payload)
           })
       })
    }
    let actions = rootModule.raw.actions
    if(actions){
       forEach(actions,(key,fn)=>{
           let arr = store.actions[key]||(store.actions[key]=[])
           arr.push((payload)=>{
               fn(store,payload)
           })
       })
    }
    forEach(rootModule.children,(moduleName,module)=>{
        installModule(store,state,path.concat(moduleName),module)
    })
}
複製代碼

由於store.mutaions[key]可能時一個數組，因此，咱們要修改咱們的commit函數。

commit(mutationType,paylod){
    this.mutations[mutationType].forEach(fn=>fn(payload))
}
複製代碼

同理，對於dispatch方法也應該做相同處理

dispatch(actionType,paylod){
    this.actions[actionType].forEach(fn=>fn(payload))
}
複製代碼

完結撒花.... 完整代碼：