Vuex简单使用学习三（Action）

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		increment(state) {
			debugger
			state.count++;
		},
		decrease(state) {
			state.count--;
		}
	},
	getters: {

	},
	actions:{
		increment(context){
			context.commit('increment');
		}
	}

})

之前第一节说过mutation里面最好不要异步操作数据，所以有了actions，他们俩很像，不同的是在actions里面提交mutation，并且可以异步操作逻辑业务

在组件中调用this.$store.dispatch('increment')

示例上看起来觉得没有必要在中转一次但是加上异步操作就不一样了

const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		increment(state) {
			
			state.count++;
		},
		decrease(state) {
			state.count--;
		}
	},
	getters: {

	},
	actions:{
		increment(context){
			return new Promise(resolve=>{setTimeout(()=>{
				context.commit('increment');
				resolve()
			},1000)})
		}
	}

})

这里用Promise一秒后提交mutation模拟异步

this.$store.dispatch('increment').then(() => {
					console.log(this.$store.state.count)//成功回调
				}).catch(function(ErrMsg) {
				console.log(ErrMsg)//失败回调
				})

Promise有三种状态

• Pending（进行中、未完成的）
• Resolved（已完成，又称 Fulfilled）
• Rejected（已失败）

mutation,actions看起来很相似，Vuex个人理解很像一个与开发者的约定，涉及改变数据用mutation，存在业务逻辑用actions