简单理解vuex原理
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实例实现响应式这样的。
（完）
Coding 个人笔记