vuex (5)

Action

Action 类似于 mutation， 不同在于:

    Action 提交的是mutation, 而不是直接变更状态

    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的参数解构来简化代码（特别是我们需要调用 commit 很多次的时候）：

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

 

分发Action

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

乍一看，感觉多此一举，我们直接分发mutation岂不更方便？实际上并非如此，还记得mutation必须同步执行这个限制吗？Action就不受约束！我们可以在 action 内部执行异步操作：

actions: {

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

 

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

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


// 以对象形式分发
store.dispath({
    type : "incrementAsync",
    amount : 10
})

 

来看一个更加实际的购物车示例，涉及到调用异步API 和分发多重 mutation

actions: {

      checkout ({commit, state}, products){
          
             // 把当前购物车的物品备份起来
             const savedCartItems = [...state.cart.added];
    
             // 发出结账请求，然后乐观地清空购物车
             commit(types.CHECKOUT_REQUEST);
 
             // 购物车 API 接受一个成功回调和一个失败回调
             shop.buyProducts(
                   products,
                   // 成功操作
                   () => commit(types.CHECKOUT_SUCCESS)

                   //失败操作
                   () => commit(types.CHECKOUT_FAILURE, savedCartItems)
             )
      }
}

注意，我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）

 

在组件中分发 Action

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

import { mapActions } from "vuex"

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

        ...mapActions({

               add: "increment"  // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
        })
     }
}

 

 

组合Action

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('gotOtherData', await getOtherData())
      }
}

 

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