简单理解vuex原理

166 阅读2分钟

vuex在用 vue一年之后就不怎么用了,搭建项目会预留,但是几乎不用了。之前也说过vuex使用场景,vue是单项数据流,所以多组件直接共享状态的时候可以使用,另外就是做一些缓存,减少请求。

只是刷新就会初始化的问题,配合本地存储,所以很多使用vuex和本地缓存,总觉得有点矛盾,甚至有些场景用本地缓存之后就不需要vuex了。除非这个数据是需要响应式的。虽然不怎么用,简单了解一下核心原理还是需要的。

Vue.use(Vuex) new Vuex.Store({})

所以暴露出去两个方法,install(vue.use会调用install)和Store方法,且vuex是个类或者构造函数:

let Vue;
export class Store {
constructor(options){}}
export const install = (_Vue) =>{
    Vue = _Vue;
applyMixin(Vue);
}

看vuex源码,调用了applyMixin方法,然后执行Vue.mixin({ beforeCreate: vuexInit });通过mixin方法获取实例。所以执行vuexInit的时候就能通过this获取实例是否有store属性(new Vue的时候把store传入),有就给vue实例添加$store:

function vuexInit () {
  var options = this.$options;
  if (options.store) {
    this.$store = typeof options.store === 'function'
      ? options.store()
      : options.store;
  } else if (options.parent && options.parent.$store) {
    this.$store = options.parent.$store;
  }
}
this.$store = options.parent.$store;主要是给组件加$store,当前组件的this上面没有,父组件有,就把父组件的给当前组件也添加$store。

最核心的部分就是通过产生一个单独的vue实例实现vuex的响应式:

this._vm = new Vue({
    data:{
        $$state:state,
    }
});

源码是store._vm,代码里面搜索new Vue就能看见。官网也有文档: 以 _ 或  开头的property 不会被Vue实例代理,因为它们可能和Vue内置的propertyAPI方法冲突。你可以使用例如 vm. 开头的 property 不会被 Vue 实例代理,因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.data._property 的方式访问这些 property(官网 学习/api/data里面有介绍)。但其实我不明白为什么要两个$。

实现getter、mutations、actions就比较简单了:

this.mutations = {};
forEachValue(options.mutations, (fn, key) => {
    this.mutations[key] = (payload) => fn.call(this, this.state, payload)
});

差不多就是发布订阅,把所有的方法都放到一个对象里面,只是getter还加了computed做缓存。

然后我们调用commit的时候调用mutations:

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

actions也差不多。

今天主要是知道vuex是通过mixin判断vue实例是否有store,然后挂载$store,通过单独创建一个vue实例实现响应式,mutations和actions用发布订阅的方法实现。至于模块就不说了,看了有些复杂。

辅助函数也还好,就是返回一个函数,然后函数里面调用this.$store.emit:

const mapMutations = (mutationList) => {
    let res = {};
    for (let i = 0; i < mutationList.length; i++) {
        let name = mutationList[i]
        res[name] = function(payload){
            this.$store.commit(name,payload);
        }
    }
    return res
}

这跟函数切片编程一样,这边只是简写了。

其实突然发现,最近分享源码的都只能自己看懂,别人应该都看不懂,只是里面有一些可以稍微提取一下,比如通过单独创建一个vue实例实现响应式这样的。