[Vuex] Vuex actions란? actions 이해하고 사용하기

actions란?

- 비동기 처리 로직을 선언하는 메서드

- 데이터 요청, Promise, ES6 async과 같은 비동기 처리는 모두 actions에 선언

 

mutations에는 동기적인 메소드를 넣고 actions에 비동기 메서드를 넣는다.

뮤테이션은 commmit  api를 호출해서 실행, 액션은 dispatch api를 호출해서 실행시킨다.

 

//store.js
state: {
	num: 10
},
mutations: {
	doubleNumber(state) {
    	state.num *2;
    }
},
actions: {
	delay(context) { //actions의 첫번째 인자 context
    	// actions에서 mutations을 접근 할 수 있다.
        // actions에서 mutations에 접근하는 경로로 context를 사용한다. 
       
        //context.commit == this.$store.commit 
        setTimeout(() => context.commit('doubleNumber'), 2000);  
    }
}


//App.vue
methods: {
	double() {
    	this.$store.dispatch('delay');
    }
}

1. App.vue에서-> delay라는 actions를 호출

2. actions에서 -> doubleNumber라는 mutations호출 

 

 

 

 

//store.js
mutations: {
	setData(state, fetchedData) {
    	state.product = fetchedData;
    }
},
actions: {
	pData(context) {
    	return axios.get('url')
        	.this(res => 
            	context.commit('setData', res)
             );
    }
}

//app.vue
methods: {
	getProduct() {
    	this.$store.dispatch('pData')
    }
}

 

 

mutations에서는 동기적인 데이터만 처리하고,  actions에서는 비동기 데이터만 처리하고,

비동기가 다 처리되면 무조건 mutations으로 데이터를 들고 와서 처리

 

 

 

 

- 인프런 캡틴판교 Vue.js 강좌 스터디 및 정리 포스팅

(이 강의 들어주세요....  최고임 ....)