[vuex] Vuex 시작하기

모든 Vuex 어플리케이션의 중심에는 store가 있습니다. store는 어플리케이션의 상태를 저장하는 컨테이너입니다. Vuex의 store와 전역객체와 두가지 차이점이 있습니다.

1. Vuex store는 반응형입니다. Vuex store가 변경되면 컴포넌트는 변경된 store를 감지하여 화면을 업데이트합니다.
2. store의 state를 직접 변경 할 수 없습니다. store의 상태를 변경할 수 있는 유일한 방법은 commit을 통해 mutations를 이용하는 방법입니다. 이렇게 하면 state 변화를 추척할 수 있고, 디버깅도 용이해 집니다.

1. Vuex 예시

state와 mutations를 사용한 간단한 Vuex 예제입니다.

// 모듈 시스템(npm 혹은 yarn)을 사용하는 경우 Vue.use(Vuex)를 먼저 호출해야합니다.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

위의 예제와 같이 Vuex를 설정하면, store.state를 사용하여 state객체에 접근 할 수 있습니다.

store.commit('increment')

console.log(store.state.count) // -> 1

store.commit을 이용하여 mutations의 메소드에 접근 할 수 있고, 이 메소드를 이용하여 state를 변경 할 수 있습니다.
store.state.count를 직접 변경하지 않고 mutations를 통해 변경하는 이유는 state 변화를 추척하기 위해서 입니다. state 변화를 추척할 수 있기 때문에 디버깅이 편해집니다.
컴포넌트 안에서 store의 state를 사용한다는 말은, 쉽게 말해서 컴포넌트의 computed 속성에 store의 state를 리턴하는 함수를 정의한다는 말입니다.
Vuex 카운터 앱에서 코드를 확인 할 수 있습니다.

2. Vuex 어플리케이션 구조

이제는 Vuex를 사용하는 어플리케이션의 구조에 대해 이야기 할 것입니다. 이번 내용은 Vuex의 모듈 내용을 아주 약간 포함하고 있지만, 그냥 그런것이 있구나 정도로 이해하고 넘어가셔도 무방할 것 같습니다.

├── index.html
├── main.js
├── api
│   └── ... # API 요청을 위한 추상화를 포함합니다.
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 모듈을 조합하고 저장소를 내보내는 곳 입니다.
    ├── actions.js        # 루트 액션
    ├── mutations.js      # 루트 변이
    └── modules
        ├── cart.js       # cart 모듈
        └── products.js   # products 모듈

위의 프로젝트 구조는 단순한 예제로 Vuex는 코드 구조를 제한하지 않습니다. 다만 3가지 원칙은 반드시 지켜야 합니다.

1. Application-level state는 중앙 집중식 store입니다.
2. state를 변경하는 유일한 방법은 commit을 통한 mutations를 이용하는 것입니다.
3. 비동기 로직은 캡슐화 되어야 하며, actions에서 비동기 로직이 사용되어야 합니다.

위의 3가지 원칙만 지킨다면 프로젝트 구조화 하는 것은 사용자에게 달려 있습니다.

참고

• https://vuex.vuejs.org/kr/guide/
• https://vuex.vuejs.org/kr/guide/structure.html