2021년 12월 27일 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는 다음과 같이 사용된다.