5、Action

介绍

本文是学习vuex时做的笔记，所有笔记内容请看 vuex学习笔记

Action

Action 类似于 mutation，不同在于：

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

示例如下：

const store = new Vuex.Store({
    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.dispacth()方法触发：

store.dispath('increment')

在actions中可以执行异步操作：

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

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

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

// 以对象形式分发
store.dispatch({
    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),
      // 失败操作
      () => commi ‘’t(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

在组件中分发Action

import { mapActions} from 'vuex'
exort default{
    //..
    methods:{
        ...mapActions({
      // 将this.increment() 映射为this.$store.dispatch('increment') 
          'increment',
      // 将this.incrementBy(amount)映射为this.$store.dispatch('incrementBy',amount) 
         'incrementBy'  
        }),
        ...mapActions({
     // 将this.add() 映射为 'this.$store.dispatch('increment')'      
            add:'increment'
        })
    }
}

组合Action
store.dispatch()可以处理被触发的action的处理函数返回的Promise，并且store.dispatch 仍旧返回Promise:

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

调用方法：

// 直接调用
store.dispatch('actionA').then(()=>{
    // actionA中异步函数执行成功后
})

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,cmomit}){
        await dispatch('actionA')// 等待actionA完成
        commit('getOtherData',await getOtherData())
    }
}

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