Vuex简单理解

Vuex简单理解

Vuex是什么

Vuex是专门为Vue.js应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化

Vuex会将全局组件的共享状态抽取出来为一个store，以一个单例模式存在，应用中的任何一个组件都可以使用，Vuex更改的唯一途径就是mutation,mutation需要commit来触发，action实际触发是mutation,其中，mutation处理的是同步任务，action处理的是异步任务。

Vuex的属性是干嘛的

Vuex的属性有六个，分别是：

1. state：存储的单一状态，是存储的基本数据，其实就是存储数据的地方
2. getter：getter是store的计算属性，对state的加工，是派生出来的数据，就像computer计算属性一样，getter返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
3. Mutation：mutation提交更改数据，使用store.commit方法更改state存储状态。（mutations同步函数）
4. Actions像一个装饰器，提交mutation,而不是直接变更状态。（actions可以包含任何的异步函数）
5. Module: Module是store分割的模块，每个模块拥有自己的state、getters、mutation、actions。
6. 辅助函数：Vuex提供了mapState、MapGetters、MapActions、mapMutation等辅助函数来给vm中处理store

Mutation和action的区别

mutaition: 更改vuex中的状态的唯一方式是提交mutation。Vuex中的mutation类似于事件：每一个mutation都有一个字符串的事件类型以及一个回调函数，这个函数就是我们进行实际状态更改的地方，它会接受state作为第一个参数，而当我们想要调用这个回调函数时，我们需要使用

const store = new Vuex.Store({
	state:{
		a:1
	},
	mutation:{
		add(state){
		state.a++
}
}
	
})
store.commit("add")//利用这个方法来调用mutation里面的add

Action:Action类似于mutation:他们的不同点在于：

1. Action提交的是mutation,而不是直接更改状态
2. Action可以包含异步操作

下面简单注册一个Action：

const store = new Vuex.Store({
	state:{
		a:1
	},
	mutation:{
		add(state){
		state.a++
		}
	},
	action:{
		add(state){
		context.commit('add')
		}	
	}
})