Vuex 6.Actions

Actions?

• 비동기 처리 로직을 기술하는 메서드이다. 동기 로직은 Mutations 가 관리한다.
• 서버 데이터 요청, Promise, ES6 async 등의 비동기 처리는 전부 Actions 에 선언한다.
• Actions 에서 Mutations 의 메서드는 Context 로 접근한다.
• this.$store.dispatch( name ) 으로 사용한다.

//store.js

new Vuex.Store({
	state: {
    	product: {}
    },
    //동기처리
    mutations: {
    	setData(state, fetchData) {
        	state.product = fetchData;
        }
    },
    
    // 비동기 처리
    actions :{
    	fetchProductData(context) { // store 의 메서드는 context로 접근해야한다.
        	return axios.get('http://domain.com/product/1')
            			.then(response => context.commit('setData',response));
        }
    }
})

//App.vue

methods : {
	getProduct() {
    	this.$store.dispatch('fetchProductData');
    }
}

 

---

왜 Actions 에 비동기 처리 로직을 작성할까?

 

 

• 언제 , 어디서 state 를 호출해서 변경했는지 확인하기가 곤란 함.
• 여러 컴포넌트에서 하나의 State 를 변경했는데, 특정시점 값을 알 수가 없는 상태.
• 사실 상 Mutations 사용 이유와 엮이는 문제의 해결이다.
• 다양한 컴포넌트에서 올라온 요청이 Mutations 에서 데이터 처리 + 비동기 처리로 기술 된다고 가정하자.
• 어느 컴포넌트에서 무엇을 호출했는지, 어느 State 를 어떻게 변경했는지 해석하기 어렵다.
• 그러므로 서버 요청 같은 Blocking 될 수 있는 로직은 Actions, 예상가능한 데이터 변경 로직은 Mutations 에 기술해야 한다.
• 단방향 데이터 흐름에 따라 Actions 에서 먼저 비동기 처리를 하고 Mutations 에서 동기적 처리를 함으로 해석이 쉽고 파악이 빠르다.