为什么要使用Vuex?
当我们使用 Vue.js 来开发一个单页应用时，经常会遇到一些组件间共享的数据或状态，或是需要通过 props 深层传递的一些数据。在应用规模较小的时候，我们会使用 props、事件等常用的父子组件的组件间通信方法，或者是通过事件总线来进行任意两个组件的通信。但是当应用逐渐复杂后，问题就开始出现了，这样的通信方式会导致数据流异常地混乱。
这个时候，我们就需要用到我们的状态管理工具 Vuex 了。Vuex 是一个专门为 Vue.js 框架设计的、专门用来对于 Vue.js 应用进行状态管理的库。它借鉴了 Flux、redux 的基本思想，将状态抽离到全局，形成一个 Store。因为 Vuex 内部采用了 new Vue 来将 Store 内的数据进行「响应式化」，所以 Vuex 是一款利用 Vue 内部机制的库，与 Vue 高度契合，与 Vue 搭配使用显得更加简单高效，但缺点是不能与其他的框架（如 react）配合使用。
安装
Vue.js 提供了一个 Vue.use 的方法来安装插件，内部会调用插件提供的 install 方法。

Vue.use(Vuex);

所以我们的插件需要提供一个install方法来安装。

let Vue;
export default inatsll(_Vue){
	Vue.mixin({beforeCreate:vuexInit});
	Vue=_Vue;
}

我们采用Vue.mixin方法将vuexInit方法混淆进beforeCreate钩子中，并用Vue保存Vue对象。那么vuexInit究竟实现了什么呢？
我们知道，在使用Vuex的时候，我们需要将store传入到Vue实例中去。

//将store放入Vue创建时的option中
new Vue({
	el:"#app",
	store
});

但是我们却在每一个vm中都可以访问该store，这个需要靠vuexInit了

function vuexInit(){
	const options=this.$options;
	if(options.store){
		this.$store=options.store;
	}else{
		this.$store=options.parent.$store;
	}
}

因为之前已经用Vue.mixin方法将vuexInit方法混淆进beforeCreate钩子中，所以每一个vm实例都会调用vuexInit方法。

Store
数据的响应式化
首先我们需要在Store的构造函数中对state进行响应化

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

熟悉响应式的同学肯定知道，这个步骤以后，state会将需要的依赖收集在Dep中，在被修改时更新对应试图。

let globalDate={
	d:'hello world'
};
new Vue({
	data(){
		return {
			$$state:{
				globalData
			}
		}	
	}
});
setTimeout(()=>{
	globalData.d='hi...';
},1000);
Vue.prototype.globalData=globalData;

任意模版中

<div>{{globalData.d}}</div>

上述代码在全局有一个 globalData，它被传入一个 Vue 对象的 data 中，之后在任意 Vue 模板中对该变量进行展示，因为此时 globalData 已经在 Vue 的 prototype 上了所以直接通过 this.prototype 访问，也就是在模板中的 {{globalData.d}}。此时，setTimeout 在 1s 之后将 globalData.d 进行修改，我们发现模板中的 globalData.d 发生了变化。其实上述部分就是 Vuex 依赖 Vue 核心实现数据的“响应式化”。
讲完了Vuex最核心的通过Vue进行数据的响应式化，接下来我们再来介绍两个Store的API。
commit
首先是commit方法，我们知道commit方法是用来触发mutation的。

commit(type,payload,_options){
	const entry=this.+mutations[type];
	entry.forEach(function commitIterator(handler){
		handler(payload);
	})
}

从_mutations中取出对应的mutation，循环执行其中的每一个mutation。
dispatch
dispatch同样道理，用于触发action，可以包含异步状态。

dispatch(type,payload){
	const entry=this._actions[type];
	return entry.length>1?Promise.all(entry.map(handler=>handler(payload))):entry[0](payload);
}

同样的，取出_actions中的所有对应的action，将其执行，如果有多个则用Promise.all进行包装。

转载链接https://juejin.im/book/5a36661851882538e2259c0f/section/5a3bb1866fb9a04515440f4e