[Vue] Vuex 개념 정리

Vuex

- 여러 개의 component가 같은 상태를 유지하기 위한 상태 관리를 해주는 역할
- 중앙 저장소에 데이터를 모아서 상태 관리
- 규칙을 설정하며, Vue의 반응성을 효율적으로 사용하는 상태 관리 기능
- 다음 명령어를 통해 사용 가능

vue create vuex-app
cd vuex-app
vue add vuex​

export default new Vuex.Store({
  state {
  },
  getters:{
  },
  muations:{
  },
  actions:{
  },
  modules:{
  }
})

state
- 중앙에서 관리하는 모든 상태 정보
- vue 인스턴스의 data에 해당
- $store.state로 state 데이터에 접근

Mutations
- 실제로 state를 변경하는 방법
- Mutations에서 호출되는 핸들러 함수는 반드시 동기적이어야 함
- 첫 번재 인자로 state를 받으며, component 혹은 Actions에서 commit 메서드로 호출

Actions
- mutations와 비슷하지만 비동기 작업을 포함할 수 있음
- state를 직접 변경하지 않고 commit 메서드로 mutations를 호출해서 state를 변경
- component에서 dispatch 메서드에 의해 호출

Getters
- vue 인스턴스의 computed에 해당
- state를 활용하여 계산된 값을 얻고자 할 때 사용
- 첫번째 인자로 state, 두 번째 인자로 getter를 받음

※ 굳이 mutation과 action을 사용하는 이유
- mutation을 사용하면 상태 변이를 추적하기 쉽고, 디버깅할 때 유용
- action을 사용하면 복잡한 비동기 로직을 처리하기 쉬움
- 둘을 사용함으로 가독성과 유지보수성이 향상