Vue原理-vuex

Posted 2022-12-03 火腿肠烧烤大赛冠军

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