[Vue] vuex의 mutations과 actions

 

🔎 Mutations과 Actions의 차이

✅ Mutations은 동기적 로직을 정의

✅ Actions는 비동기적 로직을 정의

 

Mutations에서 다수의 상태 변경이 비동기적으로 수행되었을 경우 예측 불가능한 상태가 되는 것을 막기 위한 의도가 있는 것 같다.

action에서는 mutations으로 commit을 행함으로써 간접적으로 상태를 변경하지만

actions을 호출하기 위한 dispatch method는 Promise를 반환하기 때문에 처리의 순서를 제어하는 것이 가능하다.

 

---

🔎 동기적 처리의 사용

 

📎actions 을 활용한 예시코드

new Vuex.Store({
	state: {
    	count: 0
    },
    mutations: {
    	plus(state, num) {
        	stage.count += num;
        }
    },
    actions: {
    	vote(context, isPlus) {
        	if(isPlus) {
            	context.commit('plus', 1);
            } else {
            	context.commit('plus', -1);
            }
        }
    }
})

(action에 전달된 isPlus가 true이면 count + 1, false라면 count - 1)

mutation은 state의 변경으로 놓아두고, action에서 처리를 행하게 하여 각 처리의 책임이 명확해 보인다.

 

 

📎mutation 을 활용한 예시코드

new Vuex.Store({
	state: {
    	count: 0
    },
    mustations: {
    	countUp(state, num) {
        	state.count = (state.count + num) % 10;
        }
    },
    actions: {
    	increment(context) {
        	context.commit('countUp', 1);
        }
    }
})

(0에서 9까지 카운트하고 9 초과 될경우 0으로 리셋)

변경처리가 state의 상태에 의존하는 변경이라면 mutations에서 처리를 하는게 더 효율적이어 보인다.

 

 

💡 결론

Mutation은 상태(state)의 변경 시 (ex. private한 setter)

Action은 공개적 처리나 복잡한 처리를 행할 때 (ex. public한 method)