6. Vuex Action

Vuex Action

• 概述

  Action 类似于 Mutation，但是是用来代替Mutatiion进行异步操作的，他们之间不同在于：

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

• Action 的使用

  Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

  实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：

  actions: {
    increment ({ commit }) {
      commit('increment')
    }
  }
  

  Action 简单使用

  const store = new Vuex.Store({
    state: {
    count: 0
    },
    mutations: {
      increment (state) {
      state.count++
      }
  },
    actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  })
  

  // 其他模块
  methods: {
    incrementAsync() {
    	this.$store.dispatch('incrementAsync')  
  }
  }
  

  Action 载荷分发（参数传递）

  // 以载荷形式分发
  store.dispatch('incrementAsync', {
    amount: 10
  })
  
  // 以对象形式分发
  store.dispatch({
    type: 'incrementAsync',
    amount: 10
  })
  

  mapMutations 辅助函数的使用

  import { mapActions } from 'vuex'
  
  export default {
  // ...
  methods: {
    ...mapActions([
    'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
  
    // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
  }
  

  Action 结合 Promise 使用

  actions: {
  actionA ({ commit }) {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
      commit('someMutation')
        resolve()
    }, 1000)
    })
  }
  }
  

  store.dispatch('actionA').then(() => {
  // ...
  })
  

  在另外一个 action 中也可以：

  actions: {
    // ...
    actionB ({ dispatch, commit }) {
      return dispatch('actionA').then(() => {
        commit('someOtherMutation')
      })
    }
  }
  

  最后，如果我们利用 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())
     }
   }
   ```