vuex的基本使用

State

用于存储全局变量

state: {
	count: 0
}

获取state的方式:

this.$store.state.count

Mutations

只能通过Mutations变更state中的值，不可以直接操作state中的数据。Mutations会对state中的数据进行集中监听

mutations: {
	addCount(count) {
		state.count++
	}
}

组件触发mutations的方式：

this.$store.commit('addCount')

Actions

用于进行一些异步操作，在Mutations中无法异步修改数据，只能通过Actions进行异步操作

actions: {
	addAsync(state) {
		setTimeOut(() => {
			state.commit('addCount')	
		})
	}
}

使用方式：

this.$store.dispatch('addAsync'))

Getters

Getters用于对Store中的数据进行加工处理

getters: {
	showCount: state => {
		return '当前count的值为：' + state.count
	}
}

获取Getters的方式：

this.$store.getters.showCount