手把手实现Vuex（一）

时间 2020-07-06

标签手把手实现 vuex 繁體版

原文原文链接

Vuex的定义

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。主要包含以下几个部分。bash

state
mutations
actions
getters
modules

Vuex 的安装

在使用中咱们经过 Vue.use(store) 的方式实现对Vuex的安装，而后咱们就能够再每一个组件中使用Vuex中的方法，下面咱们看一下的它的实现。异步

实现声明一个install方法，这样Vue.use 就能够调用。
Vue.use 会传入Vue，经过Vue.mixin 在Vue生命周期beforeCreate 为每一个组件注入store。

//安装的方法
const install=(_Vue)=>{
   Vue=_Vue;
  //为每一个组件注入
  Vue.mixin({
       
        beforeCreate(){
            //说明是根
            //this.$options.store 由于在main.js 中 new Vue({store}) 
            if(this.$options && this.$options.store)
            {
                this.$store=this.$options.store;
            }
            //子组件就从父组件取
            else{
                this.$store=this.$parent && this.$parent.$store;
            }
        }
  })
}
复制代码

state 的实现

state 是用来存储响应式数据的单一状态树函数

state中的数据是响应式的。
经过 this.$store.state 访问其中的数据。

原理实现post

class Store{
    constructor(options)
    {
        //state 将state 数据设置为响应式
        //this.state=options.state ||{}
        this._vm=new Vue({
              data:options.state
    }
    // 得到state 
    get state(){
       return  this._vm
    }
}
复制代码

将数据置为响应式有两种方案ui

直接经过 new Vue({data:XXX})。
经过Vue.observable（2.6新增）。

getter 的实现

调用方式：this.$store.getter.xxx,所以咱们能够经过Object.defineProperty对xxx 属性进行数据劫持，一旦访问改属性，就执行相应的方法。

const forEach=(obj,callBack)=>
{
    if(typeof obj!=='object' || obj===null)
    {
        return [];
    }
    Object.keys(obj).forEach(key=>{
          callBack(key,obj[key])
    });
}
class Store{
    constructor(options)
    {
        //state 将state 数据设置为响应式
        //this.state=options.state ||{}
        this._vm=new Vue({
              data:options.state
        })
        //设置 getters
        let getters=options.getters ||{};
        this.getters={};
        //getter 的核心实现
        forEach(getters,(key,fn)=>{
              Object.defineProperty(this.getters,key,{
                  get:()=>{
                        return fn.call(this,this.state);
                  }
              })
        })

        })
  
    }
   
}

复制代码

mutation的实现

mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。this

对传入的属性进行遍历订阅
经过commit方法触发调用。

核心就是一个发布订阅spa

class Store{
    constructor(options)
    {
        //设置 mutations 依赖于 订阅 发布模式 

        let mutations=options.mutations||{};
        this.mutations={};
        forEach(mutations,(key,fn)=>{
            
             this.mutations[key]=(params)=>{
                  fn.call(this,this.state,params);
             }
        })
 
    }
   

    commit=(name,params)=>{
        this.mutations[name](params)

    }
}

复制代码

action的实现。

本质和mutation没有什么不一样，一样也是一个发布订阅，就是在使用总一半用于处理异步请求。code

//
  forEach(actions,(key,fn)=>{
            this.actions[key]=(params)=>{
                fn.call(this,this.state,params);
           }
           
        })
//触发action调用
 dispatch=(type,params)=>{
        this.actions[type](params);

    }

复制代码

所有源码：生命周期

class Store{
    constructor(options)
    {
        //state 将state 数据设置为响应式
        //this.state=options.state ||{}
        this._vm=new Vue({
              data:options.state
        })
        //设置 getters
        let getters=options.getters ||{};
        this.getters={};

        forEach(getters,(key,fn)=>{
              Object.defineProperty(this.getters,key,{
                  get:()=>{
                        return fn.call(this,this.state);
                  }
              })
        })
        //设置 mutations 依赖于 订阅 发布模式 

        let mutations=options.mutations||{};
        this.mutations={};
        forEach(mutations,(key,fn)=>{
            
             this.mutations[key]=(params)=>{
                  fn.call(this,this.state,params);
             }
        })
        //配置 action

        this.actions={};
        let actions=options.actions ||{};
        
        forEach(actions,(key,fn)=>{
            this.actions[key]=(params)=>{
                fn.call(this,this.state,params);
           }
           

        })
        //对 modules 进行收集

        var modules=new ModuleCollection(options);
        console.log(modules);





    }
    get state(){
       return  this._vm

    }

    commit=(name,params)=>{
        this.mutations[name](params)

    }
    dispatch=(type,params)=>{
        this.actions[type](params);

    }

}



//安装的方法
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;
            }


        }
  })

}
//必须处处install 方法
export default{
     install,
     Store
}
复制代码

结语

至此咱们实现了一个简易的Vuex，能够基本模拟Vuex的经常使用场景，可是尚未实现modules的实现，加入了module就变得复杂不少。以上代码就会有很大变更，可是核心原理没有改变，咱们下一节继续探究modules的实现。本人小白，若有错误，请谅解，并欢迎指正事件

下一节：juejin.im/post/5efe7c…