Vuex系列之 Action 的使用

Posted 2023-03-31 老__L

文章の目录

• 一、定义 Action
• 二、触发 Action
• • 1、触发 actions 的第一种方式
  • 2、触发 actions 的第二种方式：
  • • 2.1、从 vuex 中按需导入 mapActions 函数
    • 2.2、将指定的 actions 函数，映射为当前组件的 methods 函数
• 写在最后

---

Action 用于处理异步任务。

如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。

一、定义 Action

// 创建store数据源，提供唯一公共数据
export default new Vue.Store(
	// state 中存放的就是全局共享的数据
	state: 
		count: 0
	,
	mutations: 
		add(state) 
			// 变更状态
			state.count++;
		,
		addN(state, step) 
			state.count += step;
		
	,
	actions: 
		addAsync(context) 
			setTimeout(() => 
				// 在 actions 中，不能直接修改 state 中的数据；
				// 必须通过 context.commit() 触发某个 mutation 才行
				context.commit("add");
			, 1000);
		
	,
	getters: 
);

触发 actions 异步任务时携带参数：第二个参数即为传递的参数

// 创建store数据源，提供唯一公共数据
export default new Vue.Store(
	// state 中存放的就是全局共享的数据
	state: 
		count: 0
	,
	mutations: 
		add(state) 
			// 变更状态
			state.count++;
		,
		addN(state, step) 
			state.count += step;
		
	,
	actions: 
		addAsync(context) 
			setTimeout(() => 
				// 在 actions 中，不能直接修改 state 中的数据；
				// 必须通过 context.commit() 触发某个 mutation 才行
				context.commit("add");
			, 1000);
		,
		addNAsync(context, step) 
			setTimeout(() => 
				context.commit("addN", step);
			, 1000);
		
	,
	getters: 
);

二、触发 Action

1、触发 actions 的第一种方式

通过dispatch触发store的异步函数，第一个参数为异步函数名，第二个参数为携带的参数。

this.$store.dispatch("addAsync");

或者

this.$store.dispatch("addNAsync", 5);

2、触发 actions 的第二种方式：

2.1、从 vuex 中按需导入 mapActions 函数

import  mapActions  from "vuex";

通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：

2.2、将指定的 actions 函数，映射为当前组件的 methods 函数

methods: 
	...mapActions(["addAsync", "addNAsync"])

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

[Vuex系列] - Actions的理解之我见

Actions如何定义的

恕小端不才，对Action的总结如下：

• Action 可以提交mutation方法，通过mutation来改变state
• Action 函数可以接收一个context对象，通过context.state 和 context.getters来改变state。（在实际工作中不常用）
• Action 可以执行任意的同步和异步操作

接下来我们通过上面三点总结来看Actions的使用：

Action 可以提交mutation方法，通过mutation来改变state

我们先在actions.js定义一个addCountAction方法用来做累加器

const actions = 
  addNumAction (context, num) 
    context.commit(‘addNum‘, num)
  ,
  addCountAction (context) 
    context.commit(‘add‘)
  

export default actions

在组件中通过.dispatch进行分发Actions，内容如下：

<template>
  <div class="action">
    <p> count </p>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
import  mapState  from ‘vuex‘
export default 
  data () 
    return 
  ,
  computed: 
    ...mapState([‘count‘])
  ,
  methods: 
    add () 
      this.$store.dispatch(‘addCountAction‘)
    
  

</script>

Action 函数可以接收一个context对象，通过context.state 和 context.getters来改变state。（不推荐使用）

在actions.js中定义一个新方法reduceCountAction方法，实现一个累减

const actions = 
  addNumAction (context, num) 
    context.commit(‘addNum‘, num)
  ,
  addCountAction (context) 
    context.commit(‘add‘)
  ,
  reduceCountAction (context) 
    context.state.count--
  

export default actions

在组件中通过.dispatch进行分发Actions，内容如下：

<template>
  <div class="action">
    <button @click="reduce">-REDUCE</button>
    <p> count </p>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
import  mapState  from ‘vuex‘
export default 
  data () 
    return 
  ,
  computed: 
    ...mapState([‘count‘])
  ,
  methods: 
    add () 
      this.$store.dispatch(‘addCountAction‘)
    ,
    reduce () 
      this.$store.dispatch(‘reduceCountAction‘)
    
  

</script>

Action 可以执行任意的同步和异步操作

我们将actions.js中的addCountAction函数修改如下：

addCountAction (context) 
    setTimeout(function () 
      context.commit(‘add‘)
    , 2000)

修改后我们发现在执行累加的时候，会等待两秒才会执行。

在组件中使用mapActions 辅助函数

将之前的组件addCountAction函数用辅助函数替代，修改如下：

<template>
  <div class="action">
    <button @click="reduce">-REDUCE</button>
    <p> count </p>
    <button @click="addCountAction">+ADD</button>
  </div>
</template>

<script>
import  mapState, mapActions  from ‘vuex‘
export default 
  data () 
    return 
  ,
  computed: 
    ...mapState([‘count‘])
  ,
  methods: 
    ...mapActions([‘addCountAction‘]),
    reduce () 
      this.$store.dispatch(‘reduceCountAction‘)
    
  

</script>

组合Actions的使用

Action通常是异步的，那么如何知道action什么时候结束呢？更重要的是，我们如何才能组合多个action，以处理更加复杂的异步流程？

首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

const actions = 
  addNumAction (context, num) 
    context.commit(‘addNum‘, num)
  ,
  addCountAction (context) 
    return new Promise((resolve, reject) => 
      setTimeout(() => 
        context.commit(‘add‘)
        resolve()
      , 1000)
    )
  ,
  reduceCountAction (context) 
    context.state.count--
  ,
  addTwoAction (context) 
    context.dispatch(‘addCountAction‘).then(() => 
      context.commit(‘addTwo‘)
    )
  

export default actions

在上面我们在addTwoAction函数中实现了一个组合的actions

• 如果我们利用 async / await，我们可以如下组合 action

// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: 
  async actionA ( commit ) 
    commit(‘gotData‘, await getData())
  ,
  async actionB ( dispatch, commit ) 
    await dispatch(‘actionA‘) // 等待 actionA 完成
    commit(‘gotOtherData‘, await getOtherData())
  

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

最后，我们说下官方的定义，在官网是这样定义的Actions：

•  
  Action 类似于 mutation，不同在于：
• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。