手把手实现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时必须存储在数组中,每次触发,数组中的方法都要执行。
image

具体实现

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的源码。本人前端小白,如有错误,请谅解,欢迎大家批评指正。

上一篇:
https://juejin.im/post/5efdd3b45188252e47138a23(掘金)
[https://www.jianshu.com/p/8dac5b9da6e5]【简书】

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341