Vuex

상태관리 패턴

• State: 컴포넌트 간 공유될 data
• View: 데이터가 표현될 template
• Actions: 사용자의 입력에 따라 반응할 methods

State

상태 가져오기

this.$store.state.${변수}

Mutations

상태를 변경하는 방법

store.commit('increment')
// => 타입이 increment인 변이가 발생하면이 핸들러 호출

무조건 동기적이어야 한다.

Actions

Mutation과 비슷하지만, 상태를 변경시키는 대신 액션으로 Mutation에 대한 커밋을 함

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
  
// payload와 함께 dispatch
store.dispatch('incrementAsync', {
  amount:  10
})

비동기 작업이 포함될 수 있다.

정리

1. state
   • 데이터
   • $store.watch로 변화 감지, 핸들링 가능
2. mutation
   • 상태를 변경시키기 위한 메소드
   • state(상태) 조작은 오로지 mutaion을 통해서만 수행하기를 권장
3. action
   • API서버 통신과 같은 열할을 수행하는 메소드(비동기 작업 수행 가능)
   • state에 반영하기 전 데이터를 조회, 가공하는 역할
4. commit
   • mutation에 속한 메소드 실행 가능
   • commit(mutation 메소드명)
   • 컴포넌트에서는 $store.commit()으로 사용
5. dispatch
   • Action에 속한 메서드를 실행시킬 수 있음
   • dispatch(action메소드명)
6. getters
   • 여러 컴포넌트에서 동일한 computed를 통해 하나의 state를 가져와야 한다면 getters 사용
7. module
   • 각각의 목적의 따라 module로 분리
   • ex) user module, post module …
   • dispatch, commit, state 등 사용 가능

mutation vs action
mutation은 순차적인 로직들만 선언하는 반면, actions: 비 순차적 또는 비동기 처리 로직 선언(setTimeout()이나 서버와의 http 통신 처리 같이 결과를 받아올 타이밍이 예측되지 않은 로직은 actions에 선언)
mutation -> commit
action -> dispatch

마무리

typescript + vuex를 공부하면서 작성한 예제는 여기에 올려 놓았다.

참고

Vuex