Vue.js - Vuex (상태관리)

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 모드를 켜지 마십시오. (성능 이슈)

실제 여러 프로젝트들을 구현하면서 사용해 봐야 잘 알것 같다. 
이론적으로는 무슨말인지 잘 아겠으나 어떻게 활용해야 잘 활용하는 것인지는 아직 잘 모르겠다...