Vuex 시작하기

Reference

Vuex 란?
What is Vuex?
Vuex 시작하기

상태 관리를 위한 패턴이자 라이브러리. 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 점!

왜 상태 관리 State Management를 하나?

컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성하는데, 예로 header, button, list, input 등의 화면 요소 단위로 쪼갤 수 있다. 이에 따라 컴포넌트 간 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요가 발생할 수 있다.

상태 관리란, 여러 컴포넌트간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미하는데, React에서는 Mobx와 같은 상태 관리 라이브러리를 사용하고 있고 Vue에서는 Vuex라는 상태 관리 라이브러리를 사용한다.

상태 관리로 해결한 수 있는 문제점?

상태 관리는 중대형 규모의 웹 애플리케이션에서 컴포넌트 간의 데이터를 더 효율적으로 전달할 수 있다.

일반적으로 앱의 규모가 커짐에 따라 아래와 같은 문제점이 발생할 수 있다.

• 뷰의 컴포넌트 통신 방식인 props / event emit 을 하는 과정에서 중간에 거쳐야 할 컴포넌트가 많은 경우
• 위 방식을 피하기 위해서 Event Bus를 사용해서 컴포넌트 간 통신을 하면서, 데이터 흐름을 파악하기 어려운 경우

위와 같은 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리이다.

상태 관리 패턴

상태 관리의 구성 요소

• state: 컴포넌트 간에 공유할 data, 앱을 작동하는 원본 소스이다.
• view: 데이터가 표현될 template
• actions: 사용자의 입력에 따라 반응할 methods, 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법이다.

new Vue({
	// state
	data(){
		return {
			counter: 0
		}
	},

	// view
	template: `
		<div>{{ counter }}</div>
	`,

	// actions
	methods: {
		increment(){
			this.counter++;
		}
	}
}

Vuex 설치 및 등록

npm install vuex

Vuex 저장소를 관리하는 파일을 생성한다.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
	state: {
		count: 0;
	},

	mutations: {
		increment (state){
			state.count++
		}
	}
})

store.js 에서 Vue.use()를 통해 Vue가 Vuex를 사용함을 선언하고, store 인스턴스를 생성해준다.

// main.js
import Vue from 'vue';
import App from './App.vue';
import { store } from './store';

Vue.config.productionTip = false

new Vue({
	el: '#app',
	// 뷰 인스턴스의 store 속성에 연결
	store: store,
	render: h => h(App)
})

store.js를 import 해온 뒤 vue 인스턴스에 주입을 한다.

Vue.config.productionTip = false는 Vue 앱이 처음 실행될 때 나오는 경고문(배포에 대한 팁)을 출력 할지 여부를 결정하는 내용으로, default는 false 이다.