想要快速学习vuex 看这篇就可

Vuex是什么？

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

其实通俗讲就是 在data中的属性需要共享给其他vue组件使用的部分，父子组件，兄弟组件之间的通信都可以通过vuex来实现

Vuex都有什么？？

const store = new Vuex.Store({
	state:{
		count:1
	},
	getters:{
		personInfo(state){
			return 'i am ' + state.count
		}
	},
	mutations:{
		INCREMENT(state){
			state.count++
		}   
		// 一般都用大写作为方法名  大家习惯一下吧 这里用大写是关于mutations-type的一些用法，初学者可忽略
	},
	actions:{
		handleAsync({commit}){
			commit('INCREMENT')
		}
	}
})

• state：存储状态，也就是变量
• getters：派生状态，也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters，外部调用方式：store.getters.personInfo(),和vue中的computed差不多
• mutations：提升状态修改，也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit(‘SET_AGE’,18)。和vue中的methods类似。
• actions ：Actions 提交的是mutations，而不是直接变更状态。Actions可以包含任意异步操作。

通过上面的这张图，可以看出来，所有的数据存储在state里面，vue的组件通过store.state或者mapState()来读取state里面的数据，而state里面的数据只能通过mutations来改变，组件可以通过$store.commit()来触发mutations里面的方法来改变state的数据，但是mutations只能提交同步方法，所以就出现了actions，actions里面可以使用异步方法，但是actions是改变mutations来改变state的方法,组件通过.dispatch来触发actions的方法

mutations和actions之间的触发

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

	const modulesA = {
			state: {
				count: 0,
			},
			mutations: {
				increment(state) {
					state.count++
				},
			},
		}
		const store = new Vuex.Store({
			modules: {
				a: modulesA,
			},
		})

通过store.state.a就获取了modulesA的状态