vuex核心概念

state：存储状态（变量）
getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用
$sotre.getters.变量名 获取数据
mutations：修改状态，并且是同步的。在组件中使用$store.commit('方法名',params)。这个和我们组件中的自定义事件类似。
actions：异步操作。在组件中使用是$store.dispath(‘方法名’,params)
modules：store的子模块，为了开发大型项目，方便状态管理而使用的。

state

单一状态树

Vuex 使用单一状态树, 用一个对象就包含了全部的应用层级状态。作为一个“唯一数据源 ”而存在。

这也意味着，每个应用将仅仅包含一个 store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

$store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM

	<!-- 页面中直接获取对应的状态（数据） -->
	<h4>{{ $store.state.msg }}</h4>

mapState

mapState()辅助函数

使用 mapState 辅助函数自动生成计算属性
ES6语法：使用对象展开运算符，将对象混入到外部对象中

computed:{
	localComputed(){ ... },
	//使用对象展开运算符，将此对象混入到外部对象中
	...mapState({ 
		/* ... */
	})
}

借助mapState生成计算属性,从state中读取数据

computed:{
	// 程序员自己写的计算属性
	sum(){
		return this.$store.state.sum
	},
	school(){
		return this.$store.state.school
	},
	subject(){
		return this.$store.state.subject
	},
	
	// 借助mapState生成计算属性,从state中读取数据（对象写法）
	...mapState({
		sum:'sum',
		school:'school',
		subject:'subject'
	}),
	
	// 借助mapState生成计算属性,从state中读取数据（数组写法）
	// 生成的计算属性名和state里的属性名必须一样
	...mapState(['sum','school','subject']),
	
}

getters

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter
的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

state:{
	sum:0,	//当前的和
	school:'尚硅谷',
	subject:'前端',
	msg:'hello,welcome to beijing!'
},
getters:{
	bigSum(state){
		return state.sum * 10
	}
}

通过$store.getters.属性名 获取数据

<h5>当前的求和放大10倍为：{{ $store.getters.bigSum }}</h5>

mapGetters

mapGetters()辅助函数

借助 mapGetters生成计算属性,从getters中读取数据

computed:{
	//	程序员自己写计算属性，从getters中读取数据
	 bigSum(){
		return this.$store.getters.bigSum
	},
	
	// 借助 mapGetters生成计算属性,从getters中读取数据（对象写法）
	...mapGetters({bigSum:'bigSum'})
	
	// 借助 mapGetters生成计算属性,从getters中读取数据（数组写法）
	...mapGetters(['bigSum'])
}

mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数
(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

准备mutations对象

// 准备mutations对象 =>修改state中的数据
const mutations = {
	PLUS(state,value){
		console.log('mutations中的PLUS调用了,修改state中的数据')
		state.sum += value
	},
	MINUS(state,value){
		console.log('mutations中的MINUS调用了,修改state中的数据')
		state.sum -= value
	}
}

直接通过commit(xxx)与mutations对话，调用mutations里的业务方法改变数据

methods:{
	increment(){
		this.$store.commit('PLUS',this.number)
	},
	decrement(){
		this.$store.commit('MINUS',this.number)
	}
}

mapMutations()辅助函数

使用mapMutations()函数自动生成对应的方法

methods:{
	// 程序员自己写的方法
	increment(){
		this.$store.commit('PLUS',this.number)
	},
	decrement(){
		this.$store.commit('MINUS',this.number)
	}, 
	
	// 借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)
	...mapMutations({increment:'PLUS',decrement:'MINUS'}),
			
	// 借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(数组写法)
	...mapMutations(['PLUS','MINUS'])

}

actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

特点：可以在 action 内部执行异步操作

在组件中分发 Action

在组件中使用this.$store.dispatch('xxx') 分发 action，或者使用 mapActions
辅助函数将组件的 methods 映射为 $store.dispatch(xxx)调用（需要先在根节点注入 store)

准备actions对象

// 准备actions对象 =>响应组件中用户的动作
const actions = {
	// 当前和为奇数时再加
	plusOdd(context,value){
		if(context.state.sum % 2){
			console.log('actions中的plusOdd调用了,响应组件中用户的动作')
			context.commit('PLUS',value)
		}
	},
	// 等一等再加
	plusWait(context,value){
		setTimeout(()=>{
			console.log('actions中的plusWait调用了,响应组件中用户的动作')
			context.commit('PLUS',value)
		},1000)
	}
}

使用this.$store.dispatch('xxx') 分发 action

methods:{
	incrementOdd(){
		this.$store.dispatch('plusOdd',this.number)
	},
	incrementWait(){
		this.$store.dispatch('plusWait',this.number)
	} 
}

actions与mutations对话，mutations中操作数据状态

mapActions()辅助函数

使用mapActions()辅助函数，自动生成dispatch函数，分发对应的action

methods:{
	// 借助 mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)
	...mapActions({incrementOdd:'plusOdd',incrementWait:'plusWait'}),
	
	// 借助 mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法)
	...mapActions(['plusWait','plusWait'])
}