Vuex는 Vue.js Application에 대한 상태관리 패턴 + 라이브러리 이다.
앱이 단순하다면 Vuex없이는 괜찮을 것이다. (간단한 Global event bus 로 대응이 가능하다.)
다만 앱이 점차 커지고 event 가 많아지며 복잡해질 경우 Vuex 가 필요해 질 것이다.
Vuex 에 대한 규칙
1. Application 레벨의 상태는 중앙 집중된 저장소 이다.
2. 상태를 변경시키는 유일한 방법은 동기 트랜잭션인 경우 변이를 커밋하는 것 이다.
3. 비동기식 로직은 캡슐화되어야 하며 액션으로 구성 된다.
4. 저장소가 너무 커지면 액션, 돌연변이 및 getter를 개별 파일로 분할하기만 하면 된다.
일반적으로 아래와 같은 프로젝트 구조를 가지게 된다. (물론 사용자 마음이긴 하다.)
여러 뷰는 같은 상태에 의존하며 서로 다른 뷰의 작업은 동일한 상태를 반영해야 할 수 있다.
모든 Vuex Application의 중심에는 store 가 있다.
store 는 Application 상태를 보유하고 있는 컨테이너이다.
Global Object 와 다른점 : store 는 반응형이며 store 의 상태를 직접 변경할 수 없다. (커밋을 이용해야만 변경 가능하며 이렇게 되면 모든 상태에 대한 추적이 가능한 기록이 남을 수 있기 때문에 앱을 더 잘 이해할 수 있게 된다.)
const stroe = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) store.commit('increment') console.log(store.state.count)
Vuex는 단일 상태 트리를 사용한다. (각 Application 마다 하나의 저장소만 갖게 된다는 의미)
const app = new VUe({ el: '#app', store, components: {Counter}, template: `` }) // 위와 같이 루트 인스턴스에 store 옵션을 제공하면 컴포넌트에서 this.$Store 로 사용할 수 있다. const Counter = { template: ` {{ counter }}', computed: { count () { return this.$Store.state.count } } }
저장소에 있는 리스트에서 필터링한 결과를 반환하고자 할 경우
const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '....', done: true }, { id: 2, text: '....', done: false } ] }, getters: { donTodos: state => { return state.todos.filter(todo => todo.done) } } }) // 이렇게 하면 모든 컴포넌트에서 쉽게 사용할 수 있다. computed: { doneTodosCount() { return this.$store.getters.doneTodos.length } }
맨 위에서 잠깐 살펴본 저장소의 값 변경을 위해 사용했던 커밋 시 아래와 같은 형태로 사용할 수 있다.
mutatinos: { increment (state, n) { state.count += n } } store.commit('increment', 10) // 또는 아래와 같은 형태 mutations: { increment (state, payload) { state.count += payload.amount } } store.commit('increment', { acmount: 10 }) store.commit({type: 'increment', amount: 10})
Vuex는 Application의 모든 상태가 하나의 큰 객체 안에 포함되기 때문에 규모가 커짐에 따라 저장소는 매우 비대해질 수 있다. 이를 위해 Vuex는 저장소를 모듈로 나눌 수 있다.
const moduleA = { state: {...}, mutatinos: {...}, actions: {...}, getters: {...} } const moduleB = { state: {...}, mutations: {...}, actions: {...} } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } })
주의 사항 : 배포 시 strict 모드를 켜지 마십시오. (성능 이슈)
실제 여러 프로젝트들을 구현하면서 사용해 봐야 잘 알것 같다.
이론적으로는 무슨말인지 잘 아겠으나 어떻게 활용해야 잘 활용하는 것인지는 아직 잘 모르겠다...
'IT > Web' 카테고리의 다른 글
Spring Boot + Spring Security + MyBatis + Vue.js (7) | 2018.09.06 |
---|---|
Vue.js - Route 시 # 없애기 (0) | 2018.09.05 |
톰캣 일반계정으로 실행 (0) | 2014.11.25 |
뒤로가기 막기 (0) | 2014.09.16 |
Apache 2.2 Load Balancing + Tomcat 6.0 Session Clustering (0) | 2013.12.30 |