[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 能够包含任意异步操做。

1、[Vuex系列] - 初尝Vuex第一个例子

2、[Vuex系列] - 细说state的几种用法

3、[Vuex系列] - Mutation的具体用法

4、[Vuex系列] - getters的用法

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

6、[Vuex系列] - Module的用法（终篇）