[Vue+] Vuex(1)

actions

액션은 뮤테이션 중에서 비동기 처리 로직들을 정의하는 속성입니다. 동기적인 코드는 mutations에 비동기 처리는 actions에 정의합니다.

비동기 처리
Javascript는 서버에 요청할 경우 그 응답에 대해서 대기하는 것이 아닌 요청을 보내고 그 다음 코드를 실행하다가 응답이 왔을 경우 해당 처리를 진행하는 JavaScript의 특성을 말합니다. 대표적으로 ajax, axios, fetch 등이 이를 활용한 비동기 요청 방법입니다.

actions 선언

export default createStore({
	state: {
    	isLoading: false
    },
    mutations: { /* 동기 처리 */
    	showLoading(state) {
        	return state.isLoading = true;
        }
    },
    actions: { /* 비동기 처리*/
    	getData(context) {
        	axios.get("url")
            	.then(res => {
                	/* commit함수의 2번째 인자를 이용해서 mutations에 인자 전달도 가능*/
             		context.commit("showLoading");
                })
                .catch(err => {
                	console.error(err);
                });
        }
    }
})

actions 호출

액션을 컴포넌트에서 사용할 때는 아래와 같이 사용합니다.

new Vue({
	methods: {
    	getData() {
        	this.$store.dispatch("getData");
        }
    }
})

dispatch를 이용해서 Vuex에 정의된 action을 실행할 수 있습니다.