Vuex란?
Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다.
애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.
상태 관리 패턴이란?
다음과 같은 기능을 가진 앱이다.
- State: 컴포넌트 간에 공유하는 데이터 - data()
- View: 데이터를 표시하는 화면 - template
- Action: 사용자 입력에 따라서 반응적으로 상태를 바꾸는 방법 - methods
new Vue({
// 상태
data () {
return {
count: 0
}
},
// 뷰
template: `
<div>{{ count }}</div>
`,
// 액션
methods: {
increment () {
this.count++
}
}
})
단방향 데이터 흐름 개념의 도표
보기에 단순하지만 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 단순함이 빠르게 저하된다.
- 지나치게 중첩된 컴포넌트를 통과하는 prop, 직접 부모/자식 인스턴스를 참조하거나 이벤트를 통해 상태의 여러 복사본을 변경 및 동기화 처리하는 패턴들은 유지보수가 불가능한 코드로 빠르게 변경된다.
기존 MVC 패턴
어플리케이션을 모델, 컨트롤러, 뷰로 나누어 유연성과 재사용성을 증가시킨 디자인 패턴이다.
- 컨트롤러가 모델을 조작하고 모델이 뷰를 업데이트하며 뷰도 모델을 직접 업데이트 할 수 있다.
어플리케이션 규모가 커지면서 모델과 뷰가 서로를 직접 업데이트하는 양방향 데이터 바인딩으로 인해서 복잡성이 증가하게 되었다.
- 기능 추가 및 변경에 따라 생기는 문제점을 예측할 수 없다.
Flux 패턴
항상 Dispatcher를 거쳐 한 방향으로 사이클을 이루며 MVC 패턴의 복잡한 데이터 흐름 문제를 해결하기 위한 개발 패턴이다.
Action: 화면에서 발생하는 이벤트 또는 사용자의 입력 (Ajax나 View에서 발생한 생태변경 요청)
Dispatcher: 데이터를 변경하는 방법, 메서드 (액션을 Store에 전달하는 전달자)
Store: 화면에 표시할 데이터 (어플리케이션 상태가 저장되어 있는 전역 저장소)
View: 사용자에게 비춰지는 화면 (상태가 변경 될 때마다 다시 그려지는 컴포넌트)
Vuex 아키텍처
Vuex는 Flux , Redux, The Elm Architecture에서 영감을 받아 컴포넌트에서 공유된 상태를 추출하고 이를 전역 싱글톤으로 관리하며 상태 관리 및 특정 규칙 적용과 관련된 개념을 정의하고 분리함으로써 코드의 구조와 유지 관리 기능을 향상시킬 수 있다.
Vuex 설치 방법
NPM
npm install vuex@next --save
Yarn
yarn add vuex@next --save
Vuex는 상태(state)를 저장하고 있는 저장소(store)를 가지고 있다.
Vuex - 주요 속성들
- state : 여러 컴포넌트에서 공유되는 데이터 - data
- getters : 연산된 state 값을 접근하는 속성 - computed
- mutations : state 값을 변경하는 이벤트 로직 - methods
- actions : 비동기 처리 로직을 선언하는 메서드 - aysnc methods
import { createStore } from 'vuex';
// state, getters, mutations, actions, modules
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {}
});/src/store.js
store.js를 import 후 Vue 인스턴스에 주입해주면 된다.
import { createApp } from 'vue';
import App from './App.vue';
import store from './store/store';
createApp(App).use(store).mount('#app');/src/main.js
📚 Reference
'vue' 카테고리의 다른 글
| script setup에서 Vuex Helper 사용하기 (0) | 2024.07.10 |
|---|
