第四十二节:Vuex状态管理:Action异步函数

1. Action的使用

1.1 Action说明:

1. Action类似于mutation,
2. 不同之处在于Action提交的是mutation,而不是直接更改状态
3. Action可以包含任意的异步操作

1.2 定义与使用Action

1.2.1 定义Action

let store = new Vuex.Store({
    state:{
        count:0
    },

    // 定义mutations
    mutations:{
        increment(state, payload){
            // mutation负责同步修改状态
            state.count++

        }
    },
    // 定义actions
    actions:{
        asyncIncrement(context){
            // action 异步触发mutation函数
            setTimeout(function(){
                context.commit({
                    type:"increment"
                })
            },1000)
        }
    }
})

1.2.2 分发Action

Action通过store.dispatch方法触发

export default {
    // ...
    methods:{
        increment(){
            // 在组件中通过dispatch触发 action函数
            this.$store.dispatch("asyncIncrement")

        }
    }
}

2 Action函数参数

Action函数 与mutation函数一样接受两个参数,

1. Action第一个参数是上下文对象context,可以通过context直接过去状态state, getter以及触发方法commit
2. Action第二个参数是PayLoad, 和mutation一样,Action也支持载荷

2.1 上下文对象

Action的第一个参数是上下文对象, 但是注意上下文对象虽然可以获取到状态或触发方法

但是上下文对象context并不是store对象

示例代码:

let store = new Vuex.Store({
    // ...
    actions:{
        asyncIncrement(context){
            console.log(context);
            /*
                context打印结果
                {
                    commit: ƒ boundCommit(type, payload, options)
                    dispatch: ƒ boundDispatch(type, payload)
                    getters: {}
                    rootGetters: {}
                    rootState: {__ob__: Observer}
                    state: {__ob__: Observer}
                }
             */

            // this是store对象
            console.log(this == context);  // false  


            // 异步通过上下文对象调用commit触发mutation
            setTimeout(function(){
                context.commit({
                    type:"increment"
                })
            },1000)
         
        }
    }
})

2.2 载荷Payload

Action与mution函数一样支持载荷

一次Action也可以如下调用

export default {
    // ...
    methods:{
        increment(){
            // 传递载荷参数
            this.$store.dispatch("asyncIncrement",{
                num: 10
            })

            // 或者如下调用
            this.$store.dispatch({
                type: "asyncIncrement",
                num: 10
            })

        }
    }
}