Vuex之Action的使用方法详解

store.commit('add')// 任何由 "add" 导致的状态变更都应该在此刻完成。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      state.count++
    }
  },
  actions: {
    add(context) {
      context.commit('add')
    }
  }
})

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

store.dispatch('add')

actions: {
  addAsync ({ commit }) {
    setTimeout(() => {
      commit('add')
    }, 1000)
  }
}

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

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

// main.js
// 根节点引入store
new Vue({
  el: '#app',
  store
})

// 组件
import { mapActions } from 'vuex'

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

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

store.dispatch('actionA').then(() => {
  // 成功操作
})

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

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

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