Vuex之理解action的用法

一.什么是actions？
背景：在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。那我们想异步操作怎么办？

作用：在actions中提交mutation，并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）

二.操作

1.定义action  --->发布$store.dispatch("SOME_INCREMENT")

//1.vueDome.vue  $store.dispatch()发布
<template>
    <div>
		<h4>测试1：Count is {{count}}</h4>
        <button @click="SOME_INCREMENT">+</button>
        <button @click="SOME_DECREMENT">-</button>
    </div>
</template>
<script>
export default {
	computed:{
		count(){
		    return this.$store.state.count
		}
	},
	methods:{
		SOME_INCREMENT(){
			this.$store.dispatch("SOME_INCREMENT");
		},
		SOME_DECREMENT(){
		  	this.$store.dispatch('SOME_DECREMENT');
		}
	}
}
</script>

//2.store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 引入actions, mutations, getters
import actions from "./actions.js"
import mutations from "./mutations.js"
import getters from "./getters.js"

const state = {
	// 应用启动时， count置为0
	count:0
}
export default new Vuex.Store({
	//创建一个对象来保存应用启动时的初始状态
	state,
	getters,
	actions,
	mutations
})


//3.mutations.js
import { SOME_INCREMENT } from './mutation-types'
import { SOME_DECREMENT } from './mutation-types'
export default {
	//使用ES6的箭头函数来给count增值
	SOME_INCREMENT(state,n){
		state.count +=n.a;
	},
	SOME_DECREMENT:state => state.count --,
}
//3.actions.js
export default {
	SOME_INCREMENT(context){
		context.commit('SOME_INCREMENT',{a:10}) //可以理解为代表了整个的context
	},
	SOME_DECREMENT({commit}){
		commit('SOME_DECREMENT');
	}
}

mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

import { mapActions } from 'vuex'
export default {
	methods:{
		...mapActions([
			'SOME_INCREMENT',
			'SOME_DECREMENT'
		])
	}
}
</script>

三.异步操作

action 内部执行异步操作：

SOME_INCREMENT(context,m){
		setTimeout(() => {  
            context.commit({  
                type: "SOME_INCREMENT",  
                amout: m.amout  
            })  
        }, 1000)  
	},

demo:

//1.vueDome.vue  $store.dispatch()发布
<template>
    <div>
    	<h4>测试1：Count is {{count}}</h4>
        <button @click="SOME_INCREMENT">+</button>
        <button @click="SOME_DECREMENT">-</button>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
	computed:{
		count(){
		    return this.$store.state.count
		}
	},
	methods:{
		SOME_INCREMENT(){
			this.$store.dispatch({  
                type: "SOME_INCREMENT",  
                amout: 100  
            });  
		},
		SOME_DECREMENT(){
		  	this.$store.dispatch('SOME_DECREMENT');
		}
	}
}
</script>

//2.store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 引入actions, mutations, getters
import actions from "./actions.js"
import mutations from "./mutations.js"
import getters from "./getters.js"

const state = {
	// 应用启动时， count置为0
	count:0
}
export default new Vuex.Store({
	//创建一个对象来保存应用启动时的初始状态
	state,
	getters,
	actions,
	mutations
})


//3.mutations.js
import { SOME_INCREMENT } from './mutation-types'
import { SOME_DECREMENT } from './mutation-types'
export default {
	//使用ES6的箭头函数来给count增值
	SOME_INCREMENT(state,n){
		state.count += n.amout;
	},
	SOME_DECREMENT:state => state.count --,
}
//3.actions.js
export default {
	SOME_INCREMENT(context,m){
		setTimeout(() => {  
            context.commit({  
                type: "SOME_INCREMENT",  
                amout: m.amout  
            })  
        }, 1000)  
	},
	SOME_DECREMENT({commit}){
		commit('SOME_DECREMENT');
	}
}

最后我们利用JS新特性，async/await组合action

//假设getData(),getOtherData()返回的是Promise
actions:{
//async 表示这是一个async函数，await只能用在这个函数里面。
    async actionA({commit}){
        commit('gotData',swait getData())
    },
    async actionA({commit}){
    //等待action完成,await 后面跟着的应该是一个promise对象
        await dispatch('actionA')
        commit('gotOtherData',await getOeherData())
    }
}

一个store.dispatch在不同模块中可以触发多个action函数。在这种情况下，只有当所有触发函数完成后，返回的Promise才会执行；