vuex学习六----actions

1：Actions

Action类似于mutation。不同在于：

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

const store=new Vuex.Store({    state:{        count:0    },    mutation:{        increment(state){            state.count++        }    },    actons:{        increment(count){            context.commit('increment')        }    }})

Action函数接收一个与store实例具有相同方法跟属性的context对象，因此你可以调用context.commit提交一个mutation，或者通过context.state根context.getters来获取state跟getters。context对象不是store实例本身；
ES2015的参数解构来简化代码(☚待研究☛)

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

2：分发Action

Action通过store.dispatch方法触发：

store.dispatch('increment')

action内部执行异步操作

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

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

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

实际购物车实例，涉及到调用异步API跟分发多重mutations

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

3：在组建中分发Action

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

import { mapActions } from 'vuex'export default{    methods:{        ...mapActions([//映射this.increment()为this.$store.dispatch('increment')            'increment'        ]),//映射this.add()为this.$store.dispatch('increment')               ...mapActions([            add:'cincrement'        ])    }}

4：组合 Actions

store.dispatch可以处理被触发的action的回调函数返回的Promise,并且store.dispatch仍旧返回Promise:

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

现在你可以：

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

在另外一个action中也可以：

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

最后我们利用JS新特性，async/await组合action

//假设getData(),getOtherData()返回的是Promiseactions:{//async 表示这是一个async函数，await只能用在这个函数里面。    async actionA({commit}){        commit('gotData',swait getData())    },    async actionA({commit}){    //等待action完成,await 后面跟着的应该是一个promise对象        await dispatch('actionA')        commit('gotOtherData',await getOeherData())    }}

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