Vuex Actions를 알아보자

actions란?

• 비동기 처리 로직을 선언하는 메소드이다. (비동기 로직을 담당하는 mutations)
• 데이터 요청, Promise, ES6 async와 같은 비동기 처리는 모두 actions에 선언한다.

예제

store.js

state: {
 num: 10
},
mutations: {
	doubleNum(state){
    	state.num * 2;
    }
},
actions: {
	delayDoubleNum(context){ // context로 store의 메소드와 속성 접근 (actions에서 mutations에 접근)
		context.commit('doubleNum');
    }
}

App.vue

this.$store.dispatch('delayDoubleNum');

그런데 왜 비동기 처리 로직은 actions를 거쳐야 할까?

• 언제 어느 컴포넌트에서 해당 state를 호출하고, 변경했는지 확인이 어려움

위와 같이 여러개의 컴포넌트에서 mutations로 시간 차를 두고 state를 변경하게 되면...

• state 값의 변화를 추적하기 어렵기 때문에, mutations에는 동기 처리 로직만 사용해야 한다.