vuex 동작원리

앞에서 언급했듯, vuex는 모든 컴포넌트에서 접근 가능 한 store가 있습니다. store는 앱내 state를 보유한 컨테이너입니다. 이 store는 두가지 특이한 법칙이 있습니다.

• store는 반응형입니다. vuex 컴포넌트는 어느곳에서든 store에 있는 state를 찾을 수 있고 state가 변경되면 신속하게 view도 변경됩니다.
• store안에 있는 state는 view에서 임의 변경 할 수 없습니다. vuex에서 허락한 방식은 commit을 이용한 mutations방법 또는 dispatch를 이용한 방법만 가능합니다.

  WARNING

  위에서 명시한 방법 그 이외에 강제로 store내의 state에 값을 주입하면 vuex warning을 띄웁니다.

state의 변화는 앞 포스팅에서 말했듯 단방향으로 view에서 Dispatch라는 함수를 동해 action이 발동되고 action안에 정의된 commit함수에 의해 mutations이 실행되고 mutations에 정의된 로직에 따라 state가 변화하고 그 state를 쓰는 view가 변하는 흐름을 따릅니다.

가장 쉬운 예제로 vuex가 어떻게 작동하는지 보겠습니다.
먼저 vuex를 설치 후, store를 정의하겠습니다.

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

이후 count를 사용하는 vue파일에서 store.state로 접근하여 store.commit 메소드로 상태 변경합니다.

store.commit("increment");

위의 결과로 store.state.count가 1로 증가합니다.

앞으로 하나의 요소씩 기능 및 사용법에 대해 알아보겠습니다.

#vue #vuex