vuex中mutation/action的傳參方式

在vuex中提交 mutation 是更改狀態的唯一方法，並且這個過程是同步的，異步邏輯都應該封裝到 action 里面。對於mutation/action，有一個常見的操作就是傳參，也就是官網上說的“提交載荷”。

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
        });
    }
}