[FE] Vuex

Vue.js 애플리케이션에서 상태 관리를 효율적으로 하기 위해 사용되는 중앙 집중식 상태 분리 패턴 및 라이브러리

 

❓사용하는 이유 

•  중앙 집중식 상태 관리 
  • 여러 컴포넌트 간에 공유되는 상태를 보다 쉽게 관리하고 상태 흐름 예측 가능 
• 단방향 데이터 흐름
  • 상태(state)가 변경될 때마다 특정한 방법(mutations)을 통해서만 상태 변경하도록 강제하여 애플리케이션의 상태 변경을 추적하고 디버깅하기 쉽게 만듦
• 상태 예측 가능성
  • 상태를 변경할 때 항상 명식적인 변이(mutations)을 통해서만 변경 가능 
• 코드의 모듈화 
  • 가독성 높이고 각 모듈을 독립적으로 개발 및 테스트 
• 복잡한 상태 관리를 간단하게
  • 컴포넌트 간에 상태 공유 또는 비동기 작업(API 호출)을 관리하는 것의 복잡성 감소

 

 

Vuex Store 구성 

• modules
  • 스토어를 모듈 단위로 나눠서 관리
• state (= data)
  • 애플리케이션의 상태 저장하는 객체
• getters (= computed) 
  • 상태를 활용해서 데이터 만들어냄
• mutations (=  methods)
  • 데이터 수정은 mutations에 정의되어져 있는 개념만 이용
  • .commit() 메소드로 실행 
• actions (= methods)
  • 데이터 수정 허용 X 👉 그 외 나머지 메소드 전부 처리 (비동기 처리)
  • .dispatch() 메소드로 실행 

 

 

 

참고자료

https://v3.vuex.vuejs.org/kr/