Vuex源码分析(手写完成部分功能帮助理解)

简单理解就是Vuex就是一个class,在class中实现vuex该有的功能,再去引用。

其中我只实现了部分功能,有兴趣的大佬可以自行补充完成,好了记得私信我我好复制你的更新这些代码hhhh。

详细看下文代码,注释都有理解起来很方便

//Store类
class Store{
    constructor( options = {} ){
        //结构我们的state等并挂载在this上
        let { state, mutations, plugins} = options;
        this._vm = state;
        this._mutations = mutations;
        
        this._subscirbe = [];
        //初始化遍历执行插件,把当前this传入
        plugins.forEach(plugin => plugin(this));
    }

    //获取对象
    get state() {
        return this._vm;
    }
    //commit方法
    commit(type, payload){
        //拿到mutations中对应的方法
        const entry = this._mutations[type];
        //无则返回有则传入
        if(!entry){
            return;
        };
        entry(this.state, payload);
        //操作每一个sub(参数1:mutation{ype, payload};参数2:state)
        this._subscirbe.forEach(sub => sub({type, payload},this.state));
    }
    subscirbe(fn){
        //判断避免重复订阅
        if(this._subscirbe.includes(fn)){
            this._subscirbe.push(fn);
        }
    }

}


//外部引用
let store = new Store({
    state:{
        num:0
    },
    mutations:{
        addNum(state,payload){
            state.num += payload || 1;
        }
    },
    plugins:[
        //订阅监听mutation变化
        sotre => store.subscribe((mutation,state)=>{
            console.log(mutation)
        })
    ]
})

我头还没秃,还不够厉害,哪里写的不对请指示我,谢谢您hhh

你可能感兴趣的:(vue,vuex,javascript)