Vuex 란?
What is Vuex?
Vuex 시작하기
상태 관리를 위한 패턴이자 라이브러리. 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 점!
왜 상태 관리 State Management를 하나?
컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성하는데, 예로 header, button, list, input 등의 화면 요소 단위로 쪼갤 수 있다. 이에 따라 컴포넌트 간 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요가 발생할 수 있다.
상태 관리란, 여러 컴포넌트간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미하는데, React에서는 Mobx와 같은 상태 관리 라이브러리를 사용하고 있고 Vue에서는 Vuex라는 상태 관리 라이브러리를 사용한다.
상태 관리로 해결한 수 있는 문제점?
상태 관리는 중대형 규모의 웹 애플리케이션에서 컴포넌트 간의 데이터를 더 효율적으로 전달할 수 있다.
일반적으로 앱의 규모가 커짐에 따라 아래와 같은 문제점이 발생할 수 있다.
위와 같은 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리이다.
상태 관리의 구성 요소
new Vue({
// state
data(){
return {
counter: 0
}
},
// view
template: `
<div>{{ counter }}</div>
`,
// actions
methods: {
increment(){
this.counter++;
}
}
}
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 이다.