December 27, 2021 https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Store/#_5-flux-pattern

앞서 Observer Pattern에 대해 알아본 것 처럼, Vuex나 Redux에서 사용되는 Flux Pattern에 대해서 알아보자.

• Flux의 가장 큰 특징은 단방향 데이터 흐름이다.
• 데이터 흐름은 다음과 같다
  • Dispatcher → Store
  • Store → View
  • View → Action
  • Action → Dispatcher
• 이런 단방향 데이터 흐름은 데이터 변화를 휠씬 예측하기 쉽게 만든다.

Vue는 이를 조금 변형하여 다음과 같은 형태로 사용한다.

• actions, mutations, state를 묶어서 store라고 보면 된다.
• state를 변화시킬 수 있는 것은 오직 mutations다.
• actions는 backend api를 가쳐온 다음에 mutations를 이용하여 데이터를 변경한다.
• state가 변경 되면, state를 사용 중인 컴포넌트를 업데이트한다.

6. Vuex 같은 Store 만들기

일단 vuex를 만들기 이전에, vuex가 어떤 interface를 가지고 있는지 살펴보자. 공식문서 (opens new window)에서 보여주고 있는 코드는 다음과 같다.

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

state가 있고, state를 변경시킬 수 있는 mutations가 존재하는 것을 확인할 수 있다.

그리고 이렇게 선언된 store는 다음과 같이 사용된다.