详解Vuex 使用和原理

vuex是什么

专为vue.js 设计的应用程序开发的状态管理模式采用集中式存储管理应用的所有组件状态，以相应的规则保证状态以一种可预测的方式反生变化

vue的数据：

组件内部数据：仅在一个组件内使用的数据（data字段）
应用级别数据：多个组件公用的状态

什么情况下使用vuex：

多个视图依赖于同一个状态
来自不同的视图行为需要变更同一个状态

vuex 的核心概念

store：类似于容器，包含应用的大部分状态
一个页面只能有一个store
状态存储是响应的（定义的数据变得时候，使用的该数据的地方跟着都变了）
不能直接改变store状态，唯一的途径是提交mutations
state：包含所有应用级别状态的对象
getters：在组件内部获取store中状态的函数，对状态做进一步处理，类似于计算属性computed

getters:{
	filterContent(state){
		return state.count >=120?120 : state.count
	}
}

mutations：唯一修改状态的事件毁掉函数(改变状态需要提交mutation)
使用：
在store中mutations 中定义事件，在要改变的位置点击去触发定义的事件
第一种提交mutation 方式

this.$store.commit('触发那个事件'，参数可选) 

第二种提交方式

this.$store.commit({
	type:'触发那个事件'，
	'参数'
})

actions：异步操作，提交mutation改变状态(触发异步操作action)
触发一个异步操作
1.在actions 中写个方法
2.要在actions中触发一个mutation context.commit(‘触发的mutation事件’,{参数})；
3.在组件中触发actions中的方法 this.$store.dispatch('addAction方法)
4.在触发action的时候，接收的是一个context是一个对象不是当前的实列，但是这个对象里包含了这个实例的方法。

commit 提交mutation
dispath 触发另一个action
getters 在组件内获取store中状态的函数
rootGetters
rootState
state 当前的状态

context是一个对象，对象可以解构赋值 {commit，dispath}
commit(‘触发的mutation函数’，传参)
dispath(‘触发的action函数’，传参)

vuex业务流程图

虚线是vuex的范围内，vue Components 是页面组件。
1.从页面中那数据开始，数据是异步操作，在页面中触发一个action。
2.action请求接口数据，要渲染到页面中
3.拿到数据后要改变页面中的状态，就会渲染到页面中去，但vuex有个原则想改变状态必须要提交一个mutation。
4.在vuetools工具中监控状态。
5.因为vue是相应的，所以状态改变页面就改变了，点击操作或触发按钮也是如此

Vuex辅助函数 (为了简化操作)

mapState
mapGetters
mapMutations
mapActions