vuex中mutation/action的傳參方式

前言

在vuex中提交 mutation 是更改狀態的唯一方法，並且這個過程是同步的，異步邏輯都應該封裝到 action 裏面。對於mutation/action，有一個常見的操作就是傳參，也就是官網上說的“提交載荷”。
這裏是關於如何在vue-cli中使用vuex的方法，我們採用將vuex設置分割成不同模塊的方法。其中，state模塊中配置如下

//vuex中的state
const state = {
    count: 0
}

export default state;

mutation傳參

樸實無華的方式
mutation.js

//vuex中的mutation
const mutations =  {
    increment: (state,n) => {
        //n是從組件中傳來的參數
        state.count += n;
    }
}

export default mutations;

vue組件中（省去其他代碼）

methods: {
    add(){
        //傳參
        this.$store.commit('increment',5);
    }
}

對象風格提交參數
mutation.js

//vuex中的mutation
const mutations =  {
    decrementa: (state,payload) => {
        state.count -= payload.amount;
    }
}

export default mutations;

vue組件

methods: {
    reducea(){
        //對象風格傳參
        this.$store.commit({
            type: 'decrementa',
            amount: 5
        });
    },
}

action傳參

樸實無華
action.js

/vuex中的action
const actions = {
    increment(context,args){
        context.commit('increment',args);
    }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations =  {
    increment: (state,n) => {
        state.count += n;
    }
}

export default mutations;

vue組件

methods: {
    adda(){
        //觸發action
        this.$store.dispatch('increment',5);
    }
}

對象風格
action.js

//vuex中的action
const actions = {
    decrementa(context,payload){
        context.commit('decrementa',payload);
    }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations =  {
    decrementa: (state,payload) => {
        state.count -= payload.amount;
    }
}

export default mutations;

vue組件

methods: {
    reduceb(){
        this.$store.dispatch({
            type: 'decrementa',
            amount: 5
        });
    }
}

action的異步操作

突然就想總結一下action的異步操作。。。。
返回promise
action.js

//vuex中的action
const actions = {
    asyncMul(context,payload){
        //返回promise給觸發的store.dispatch
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                context.commit('multiplication',payload);
                resolve("async over");
            },2000);
        });
    }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations =  {
    multiplication(state,payload){
        state.count *= payload.amount;
    }
}

export default mutations;

vue組件

methods: {
    asyncMul(){
        let amount = {
            type: 'asyncMul',
            amount: 5
        }
        this.$store.dispatch(amount).then((result) => {
            console.log(result);
        });
    }
}

在另外一個 action 中組合action
action.js

//vuex中的action
const actions = {
    asyncMul(context,payload){
        //返回promise給觸發的store.dispatch
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                context.commit('multiplication',payload);
                resolve("async over");
            },2000);
        });
    },
    actiona({dispatch,commit},payload){
       return dispatch('asyncMul',payload).then(() => {
            commit('multiplication',payload);
            return "async over";
       })
    }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations =  {
    multiplication(state,payload){
        state.count *= payload.amount;
    }
}

export default mutations;

vue組件

methods: {
    actiona(){
        let amount = {
            type: 'actiona',
            amount: 5
        }
        this.$store.dispatch(amount).then((result) => {
            console.log(result);
        });
    }
}

使用async函數
action.js

//vuex中的action
const actions = {
    asyncMul(context,payload){
        //返回promise給觸發的store.dispatch
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                context.commit('multiplication',payload);
                resolve("async over");
            },2000);
        });
    },
    async actionb({dispatch,commit},payload){
        await dispatch('asyncMul',payload);
        commit('multiplication',payload);
    }
}

export default actions;

mutation.js

//vuex中的mutation
const mutations =  {
    multiplication(state,payload){
        state.count *= payload.amount;
    }
}

export default mutations;

vue組件

methods: {
    actionb(){
        let amount = {
            type: 'actionb',
            amount: 5
        }
        this.$store.dispatch(amount).then(() => {
            ...
        });
    }
}