Vuex는 Vue.js 애플리케이션에서 상태 관리를 중앙 집중화하기 위해 설계된 오픈 소스 라이브러리이다. Vue.js의 창시자인 Evan You와 Vue 커뮤니티가 공동으로 개발했으며, 2015년에 첫 번째 공식 릴리스가 이루어졌다. MIT 라이선스로 배포되어 누구나 자유롭게 사용·수정·재배포할 수 있다.
핵심 개념
| 요소 | 설명 |
|---|---|
| State | 애플리케이션 전역에서 공유되는 데이터 객체. Vue 컴포넌트는 store.state를 통해 접근한다. |
| Getter | State를 기반으로 계산된 값을 반환하는 함수. 캐시가 적용되어 동일 입력에 대해 재계산이 일어나지 않는다. |
| Mutation | State를 직접 변경하는 유일한 방법이며, 동기적으로 실행된다. commit 메서드로 호출한다. |
| Action | 비동기 로직을 수행하고, 필요 시 Mutation을 commit한다. dispatch 메서드로 실행한다. |
| Module | 대규모 애플리케이션을 위해 Store를 기능별로 나누어 계층 구조를 구성한다. 각 모듈은 자체 State, Getter, Mutation, Action를 가질 수 있다. |
주요 특징
- 예측 가능한 상태 변화: 모든 상태 변경이 Mutation을 통해 명시적으로 기록되므로 디버깅이 용이하다.
- 타임 트래블 디버깅: Vue Devtools와 연동해 상태 변화를 시간 순서대로 추적할 수 있다.
- SSR 지원: 서버 사이드 렌더링 환경에서도 동일한 Store 인스턴스를 사용해 초기 상태를 전달한다.
- 플러그인 구조: 로깅, 영구 저장(persistence), API 요청 처리 등 다양한 플러그인을 손쉽게 적용할 수 있다.
사용 예시
// store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
getters: {
doubleCount: (state) => state.count * 2
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
asyncIncrement({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})
위와 같이 정의된 Store는 Vue 애플리케이션 루트에 app.use(store) 형태로 등록된다. 컴포넌트에서는 computed와 methods를 이용해 상태와 변이 로직을 호출한다.
관련 기술
- Vue.js: Vuex는 Vue.js(주로 Vue 2와 Vue 3)와 긴밀히 연동되며, 공식 문서에서 권장하는 상태 관리 방식이다.
- Flux / Redux: Vuex는 Flux 아키텍처에 기반을 두고 있으며, Redux와 유사한 개념(일방향 데이터 흐름, 액션/리듀서)들을 차용한다.
참고 문서
- 공식 문서: https://vuex.vuejs.org/
- GitHub 저장소: https://github.com/vuejs/vuex
이상은 Vuex에 대한 객관적이고 중립적인 요약이다.
