vue状态管理模式vuex-Action

Action 类似于 mutation，不同在于：
1.Action 提交的是 mutation，而不是直接变更状态
2.Action 可以包含任意异步操作
action实例

const store = createStore({
  state: {
    count: 0
   },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    actions: {
      increment (context) {
        context.commit('increment')
      }
     }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
也可以使用ES2015的参数解构来简化代码

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

分发Action

Action通过store.dispatch方法触发

store.dispatch('increment')

在 action 内部可以执行异步操作

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

Actions 支持同样的载荷方式和对象方式进行分发

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

组件中分发Action

在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）

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

Action 通常是异步的，那么如何知道 action 什么时候结束呢?
首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 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('getData', await getData())
  },
  async actionB ({ dispatch,commit }) {
    await dispatch('actionA') // 等待actionA完成
    commit('getOtherData', await getOtherData())
  }
}