Vuex란 무엇일까?

 

우리 회사에서는 Quasar라는 Vue 프레임워크를 사용한다. 기존에 Quasar로 제작된 소스를 보다가 상태관리하는 Vuex에 관한 코드들을 보게 되어 분석을 하면서 Vuex에 대해 찾아보았다. 

 

Vuex란?

Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공합니다.

모든 Vuex 애플리케이션의 중심에는 store 가 있습니다. store는 기본적으로 애플리케이션 상태 를 보유하고있는 컨테이너입니다. Vuex 저장소가 일반 전역 개체와 두 가지 다른 점이 있습니다.

1. Vuex store는 반응형 입니다. Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트합니다.
2. 저장소의 상태를 직접 변경할 수 없습니다. 저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이 입니다. 이렇게하면 모든 상태에 대한 추적이 가능한 기록이 남을 수 있으며 툴을 사용하여 앱을 더 잘 이해할 수 있습니다.

 

Vuex의 구조

• state: data 역할, 데이터를 불러옴
• Getters: computed 역할, 캐시되어야할 데이터
  • 위 두 속성으로 component에 접근
• Mutations: 이곳에 있는 함수들을 commit해서 state를 변화시킨다.
  • mutations에 비동기 로직이 포함된다면?
  • 순서를 알기 어렵다.
  • State 변화를 Mutations에서 하고
  • commit: Mutations의 함수 실행
• Actions: 비동기로직을 처리함.
  • 여기서 비즈니스로직을 처리함.
  • Dispatch: Actions의 함수 실행
  • Actioncs에서 중요한 로직을 다 짜고
  • 그 다음 commit으로 Mutation으로 넘김

 

Vuex 동작흐름

• 1. component에서 dispatch로 Actions를 실행하고
• 2. Actions내에서 Commit해서 Mutations을 실행하고
• 3. Mutaions로 State를 변화 시킨다.

Actions에서 사용할 비즈니스 로직중 서버에다 get, post 등 rest로 요청할 것들을 따로 빼서 apiFunction을 만들어서 사용하면 분리해서 관리하기 좋다.