手把手实现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…