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内置的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实例实现响应式这样的。