手把手實現Vuex（二）

開始

上一節咱們實現了一個簡易版的Vuex，對state,actions,mutations,getters 進行了功能的實現。可是沒有對modules進行處理，其實modules纔是Vuex中最核心而且是最難實現的。

module

Vuex 容許咱們將 store 分割成大大小小的對象，每一個對象也都擁有本身的 state、getter、mutation、action，這個對象咱們把它叫作 module（模塊），在模塊中還能夠繼續嵌套子模塊。

• state：全部模塊中的state中數據最終都會嵌套在一棵樹上。相似於以下

state={
      name:'yxw',
      age:'20',
      moduleA:{
           schoool:'hb',
            moduleC:{
               other:''
           }
      },
      moduleB:{
            work:''

      }
}

複製代碼

• 模塊內部的 action、mutation 和 getter 默承認是註冊在全局命名空間的，這樣使得多個模塊可以對同一 mutation 或 action 做出響應。所以在訂閱mutation 和action時必須存儲在數組中，每次觸發，數組中的方法都要執行。

具體實現

module的收集（核心）

具體實現

/**
 * module 的收集
 */

class ModuleCollection{
     constructor(options){
           //數據存儲對象
           this.root={};
           this.register([],options);

     }
     /**
      * 註冊
      * @param {*} path 註冊路徑
      * @param {*} rootModule 註冊module
      */
     register(path,rootModule){
        let newModule={
            state:rootModule.state, //爲了 state合併方便
            _children:{},
            _raw:rootModule //便於取值
      }
      //表明是根
      if(path.length===0)
      {
          this.root=newModule      
      }
      else{
          //this.register(path.concat(key),module); 遞歸註冊前會把module 的名放在 path的位
          //取最後一項就能取到module
          let parent=path.splice(0,-1).reduce((root,cur)=>{
                return root._children[cur];
          },this.root);
          //掛載
          parent._children[path.length-1]=newModule;

      }
      //若是存在子module
      if(rootModule.modules)
      {
         //而後遍歷
          forEach(rootModule.modules,(key,module)=>{
              //遞歸註冊
              this.register(path.concat(key),module);

           })
      }
     }

}

複製代碼

module的安裝

將全部module收集後須要對收集到數據進行整理。

• state數據要合併。 經過Vue.set(parent,path[path.length-1],rootModule.state)，既能夠合併，又能使使 module數據成爲響應式數據;
• action 和mutation 中方法訂閱（數組）

/**
 * 安裝方法
 * @param {*} store 
 * @param {*} state 
 * @param {*} path 
 * @param {*} rootModule 
 */

const installModules=(store,state,path,rootModule)=>{
    //modules 中的 state 的處理
     if(path.length>0)
     {
         let parent=path.slice(0,-1).reduce((state,cur)=>{
             return state[cur];

         },state);
         //須要將module中的state 置爲響應式數據
         Vue.set(parent,path[path.length-1],rootModule.state);
     }

    //處理getter
     let getters=rootModule._raw.getters;
     forEach(getters,(name,fn)=>{

        Object.defineProperty(store.getters,name,{
              get(){
                    return fn.call(this,rootModule.state);
              }
        });

     })
     //處理 mutation

     let mutations=rootModule._raw.mutations||{};
     forEach(mutations,(name,fn)=>{
            let arr=store.mutations[name] || (store.mutations[name]=[]);
           arr.push((...params)=>{
               fn.call(this,rootModule.state,...params);

           })
     })

      //處理 mutation

      let actions=rootModule._raw.actions ||{};
      forEach(actions,(type,fn)=>{
             let arr=store.actions[type] || (store.actions[type]=[]);
            arr.push((...params)=>{
                fn.call(this,rootModule.state,...params);
 
            })
      })
    //遞歸安裝子modules
    forEach(rootModule._children,(name,module)=>{
          installModules(store,state,path.concat(name),module)
    })

};

複製代碼

Store類

class Store{
    constructor(options)
    {
        
        this._vm=new Vue({
              data:options.state
        })
        this.mutations={};
        this.getters={};
          this.actions={};
        var modules=new ModuleCollection(options);
        installModules(this,options.state,[],modules.root);
        console.log(this.mutations)

    }
    get state(){
       return  this._vm

    }
    commit=(name,...params)=>{
      //訂閱的方法在數組中
        this.mutations[name].forEach(fn=>{
              fn(...params)
        })
    
    }
    dispatch=(type,...params)=>{
    //訂閱的方法在數組中
        this.actions[type].forEach(fn=>{
            fn(...params)
      })
 
 
    }

}

複製代碼

Vuex的安裝方法和導出

上一節已經說明此處再也不贅述。

//安裝的方法
const install=(_Vue)=>{
   Vue=_Vue;
  //爲每一個組件注入
  Vue.mixin({
        beforeCreate(){
            //說明是根
            if(this.$options && this.$options.store)
            {
                this.$store=this.$options.store;

            }
            else{
                this.$store=this.$parent && this.$parent.$store;
            }
        }
  })
}
export default{
     install,
     Store
}
複製代碼

結語

這樣Vuex的核心功能已經基本完成，能夠在本身項目中將vuex路徑更換，看看時候能實現基本功能，固然和真正源碼還差之千里，更多功能實現能夠看一下vuex的源碼。本人前端小白，若有錯誤，請諒解，歡迎你們批評指正。

上一篇：juejin.im/post/5efdd3…