Vuex之理解action的用法

古城微笑少年丶 2021-09-15 02:26 450阅读 0赞

一.什么是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才会执行；