Vuex - State, Getters, Mutations, Actions

🔊 Vue에 대한 이해가 있다는 가정하에 정리된 자료입니다. 
🔊 공식 사이트를 정리한 내용입니다. 자세한 내용은 공식 사이트를 참고해주세요 😉
🔊 Vuex의 모듈은 본 장에서 다루지 않습니다. 

 

1. Vuex란 뭘까?

• 상태 관리 + 라이브러리
  • 상태 관리?
    • Vue의 3가지 기능: data, template, methods
    • state = data : 앱을 작동하는 원본 소스, 조작하고자 하는 데이터
    • view: 상태의 선언적 매핑. 사용할 data를 선언하는 곳
    • methods: data를 실제로 조작하는 곳
• Components 간 많이 사용하는 data(state)를 중앙 집중 저장소에서 관리하기 위한 역할

new Vue({
	// 1. 상태 = data
    data(){
    	return {
        	a: 0
        };
    }

	// 2. View = html element
    template: `
    	<div> {{a}} </div>
    `
    
    // 3. Action = data 조작과 같은 함수 
    methods: {
    	doubleA() {
        	this.a *= 2
        }
    }
});

 

2. Vuex 등장 이전

• Vue는 컴포넌트 간 단방향 통신을 제공한다.
  
  • 상위에서 하위로만 데이터 전달이 가능하다. (props)
  • 하위에서 상위로 데이터 전달을 할 때는 이벤트를 발생시킨다. ($emit)

➖ 데이터의 일관적 흐름을 보장할 수 없다. 

3. Vuex 

➕ store를 이용하여 데이터의 일관적 흐름을 보장한다.

• store: 애플리케이션 상태(데이터)를 보관하고 있는 컨테이너 
• 동기적, 비동기적으로 상태에 대응할 수 있다. (=반응형)

• 저장소 코드 예제 

const store = new Vuex.store({
	state: {
    	stored_data: 0
    },
    mutations: {
    	update_stored_data(state) {
        	stored_data++;
        }
    }
});

store.commit('update_stored_data');
console.log(store.state.stored_data);

 

4. Vuex 구성

 

1) State

• 단일 상태 트리 사용
  • 컴포넌트에서 많이 참조되는 data가 선언되어 있다.
  • Vuex store에서 컴포넌트에 사용되는 state(data)를 한눈에 확인 가능하다.  
  • 단일 트리 형태로 접근 가능하다. 
• mutations에 정의된 method에 의해 변경이 가능하다.
  • 동기 처리가 필요한 경우 mutations의 method를 호출한다. (대문자로 작성, 구분을 위해)
  • 컴포넌트에서 직접 변경 ❌
• actions의 method를 호출하는 것을 dispatch라고 한다.
  • 비동기적 처리가 필요한 경우 actions의 method를 호출한다.

2) Getters

• state의 조작이 필요한 경우 getters를 호출한다. (filter의 역할)
• 실제 데이터 변경이 일어나는 것은 아니다. 
• 인자로 state가 주어진다.

3) Mutations

• 저장소에 접근하여 state(데이터)를 변경한다.
• 인자로 state가 주어진다.

4) Actions

• 비동기적 처리를 담당한다.
• state를 직접 접근하지 않고 state 변경이 필요한 경우 mutations을 거친다.
• mutations에 접근하고자 할 때, context.commit(mutations 이름)을 호출한다. 
• 인자로 context가 주어진다. 

5) Helper

• mutations, getters, actions, state의 선언을 생략하고 깔끔하게 접근하기 위한 방식
• mapState, mapGetters, mapMutations, mapActions가 있다.
• ES6의 SpreadOperator을 사용한다.
  • spread 연산자는 특정 객체 또는 배열을 다른 객체나 배열로 복제하기 위한 것 

let obj1 = {
	a: 5, b: 10
};

let obj2 = {...obj1, c: 20};

6) 코드

// store/index.js

const store = new Vuex.Store({
	state: {
    	data: 0
    },
    mutations: {
    	UPDATE_DATA(state) {
        	data++;
        }
    },
    actions: { // 비동기 처리 담당
    	update_data(context) {
        	// 비동기 처리 후...
        	// 데이터 setting
        	context.commit('UPDATE_DATA');
        }
    },
    getters: {
    	append_to_data(state) {
        	return "value: " + state.data;
        }
    }
});

// xxx.vue

...
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";

export default {
	name: "", 
    data() {
    	return {};
    },
    computed: {
    ...mapState(["data"]),
    ...mapGetters(["append_to_data"]),
    
    ...
    }, 
    methods: {
    ...mapActions(["update_data"]),
    ...mapMutations(["UPDATE_DATA"])
    }
}
</script>

---

API 문서: https://v3.vuex.vuejs.org/kr/​

 

💭 잘못된 내용이 있다면 피드백 부탁드립니다 😉