Vue原理-vuex

Vuex原理

store注入组件install方法

Vue.use(Vuex); // vue的插件机制,安装vuex插件

当ues(Vuex)时候，会调用vuex中的install方法，装在vuex!
下面时install的核心源码：

Vue.mixin({
        beforeCreate() {
            if (this.$options && this.$options.store) {
                //找到根组件 main 上面挂一个$store
                this.$store = this.$options.store
                // console.log(this.$store);

            } else {
                //非根组件指向其父组件的$store
                this.$store = this.$parent && this.$parent.$store
            }
        }
    })

store注入 vue的实例组件的方式，是通过vue的 mixin机制，借助vue组件的生命周期 钩子 beforeCreate 完成的。即 每个vue组件实例化过程中，会在 beforeCreate 钩子前调用 vuexInit 方法

Vuex如何实现响应式的

state实现：

    this._s = new Vue({ 
        data: {
            // 只有data中的数据才是响应式
            state: options.state
        }
    })

getters实现

//实现getters原理
    let getters = options.getters || {}
    // console.log(getters);
    // this.getters = getters; //不是直接挂载到 getters上 这样只会拿到整个 函数体
    this.getters = {};
    // console.log(Object.keys(getters))  // ["myAge","myName"]
    Object.keys(getters).forEach((getterName) => {
        // console.log(getterName)  // myAge
        // 将getterName 放到this.getters = {}中
        // console.log(this.state);
        Object.defineProperty(this.getters, getterName, {
            // 当你要获取getterName（myAge）会自动调用get方法
            // 箭头函数中没有this               
            get: () => {
                return getters[getterName](this.state)
            }
        })
    })

Vuex的state状态是响应式，是借助vue的data是响应式，将state存入vue实例组件的data中；Vuex的getters则是借助vue的计算属性computed实现数据实时监听。

注意：响应式和双向绑定不是一个概念

mutations实现

let mutations = options.mutations || {}
    // console.log(mutations);
    this.mutations = {};
    Object.keys(mutations).forEach(mutationName=>{
        // console.log(mutationName);

        this.mutations[mutationName] = (payload) =>{
            this.mutations[mutationName](this.state,payload)
        }
    })

action实现

// actions的原理 
let actions = options.actions || {}
this.actions = {};
forEach(actions,(actionName,value)=>{
    this.actions[actionName] = (payload)=>{
        value(this,payload)
    }
})

commit dispatch的实现

commit(type,payload){
    this.mutations[type](payload)
}

// type是actions的类型  
dispatch=(type,payload)=>{
    this.actions[type](payload)
}

参考链接：https://www.cnblogs.com/hjson/p/10500770.html