Vuex中的核心概念state,getters,mutations,actions

本篇文章是在观看视频时随笔做的，在此附上
B站视频链接以及Vuex官方文档

Vuex提供唯一的公共数据源，所有共享的数据都要统一放到store的State中进行存储
//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
	state:{count:0}
})

state
组件中访问state中的数据  第一种方式
this.$store.state.全局数据名称

组件访问state中数据      第二种方式
1.从vuex中按需导入mapState函数
import {mapState} from 'vuex'
通过刚才导入的mapState函数，将当前组件所需的全局数据，映射为当前组件的computed计算属性：
2.将全局数据，映射为当前组件的计算属性
computed:{
	...mapState(['全局数据名'])
}


mutation
mutation用于变更store中的数据
1.只能通过mutation变更store数据，不可以直接操作store中的数据
2.通过这种方式虽然操作起来繁琐，但是可以集中监控所有数据的变化
用法：
//定义mutation
mutations:{
	//添加一个方法名为add的方法来该百年state中的数据，第一个参数永远是state
	add(state) {
		//变更状态
		state.count++
	}
}
//触发mutation
methods: {
	handle() {
		//触发mutations的第一种方式
		this.$store.commit('add')
	}
}
//可以在触发mutations时传递参数
//store中
addN(state,step) {
	//变更状态
	state.count += step
}
//组件中
handle() {
	//在调用commit函数，触发mutations时携带参数
	this.$store.commit('addN',3)
}
触发mutations的第二种方式
//1.从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'
//2.组件中，将指定的mutations函数，映射为当前组件的methods函数
methods: {
	//映射了两个方法
	...mapMutations(['add','addN'])
	//组件中触发事件
	btn() {
		//this.addN(step)
		this.addN(3)
	}
}

actions:action用于处理异步操作
如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方法间接变更数据
actions: {
	//此处调用形参context，来触发.commit方法
	addAsync (context) {
		setTimeout(()=>{
			//在action中，不能直接修改state中的数据；必须通过context。commit（）触发某个mutation才行
			context.commit('add')
		},1000)
	}
}
//组件中，触发action
methods: {
	handle() {
		//运用dispatch 触发actions 的第一种方式
		this.$store.dispatch('addAsync')
	}
}
触发action异步任务时携带参数：
action: {
	addNAsync (context,step) {
		setTimeout(()=>{
			//携带的参数传递给mutation
			context.commit('addN',step)
		},1000)
	}
}
//组件中
methods: {
	handle() {
		//在调用dispatch函数，触发actions时携带参数
		this.$store.dispatch('addNAsync',5)
	}
}
//触发actions的第二种方式
1.从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'
2.将指定的actions函数，映射为当前组件的methods函数
methods:{
	...mapActions(['subAsync'])
	btnhandle3() {
		this.subAsync()
	}
}

getter用于对store中的数据进行加工处理成新的数据，不会修改数据，只会包装数据
1.getter可以对store中的已有数据加工处理之后形成新数据，类似于Vue的就算属性。
2.store中的数据发生变化，getter的数据也会跟着变化
//定义getter
getters:{
	showNum: state=> {
		return '当前最新的数量是['+ state.count +']'
	}
}
使用getters的第一种方式：
this.$store.getters.名称
使用getters的第二种方式：
import {mapGetters} from 'vuex'
computed :{
	...mapGetters(['showNum'])
}