[Vue.js] vuex

vuex

• Vue.js application 에 대한 상태관리패턴 + 라이브러리 (https://vuex.vuejs.org/)
• application 모든 component들의 중앙 저장소 역할 (데이터 관리)
• 상위(부모) 하위(자식)의 단계가 많이 복잡해진다면 데이터 전달하는 부분이 매우 복잡
• application이 여러 구성요소로 구성되고 더 커지는 경우 데이터를 공유하는 문제가 발생

 

 

상태관리패턴

상태(data())는 앱을 작동하는 원본 소스

뷰(template)는 상태의 선언적 매핑

액션(methods)은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법

단방향으로 데이터의 흐름이 진행된다.

 

vuex의 핵심 컨셉 이해

---

vuex 저장소 개념

• State : 단일 상태 트리를 사용. application마다 하나의 저장소를 관리 (data)
• Getters : Vue Instance의 Computed와 같은 역할. State를 기반으로 계산 (Computed)
• Mutations : State의 상태를 변경하는 유일한 방법 (동기Methods)
• Actions : 상태를 변이시키는 대신 액션으로 변이에 대한 커밋 처리 (비동기 Methods)

Actions -> Mutataion -> State

 

- state

• 저장소에서 data 속성의 역할
• application에서 공유해야 할 data를 관리
• State에 접근하는 방식 : this.$store.state.data_name or ...mapState사용

  computed: {
      ...mapState(["center"]),
    },​

 

- Getters

• component가 vuex의 state를 직접 접근하는 코드가 중복된다면 ? 해결 : Stroe의 state를 참조하는 Getters 활용
• 사용 : this.$store.getters.GETTERS_NAME; or ...mapGetters 사용

 

- Mutations

• State의 값을 변경하기 위해서 사용
• 각 컴포넌트에서 State의 값을 직접 변경하는 것은 권장하지 않는 방식
• state값의 추적을 위해 동기적 기능에 사용
• 사용 : Mutations는 직접 호출이 불가능하고 store.commit('정의된 이름')으로 호출 or ...mapMutations 사용

 

- Actions

• 비동기 작업의 결과를 적용하려고 할 때 사용
• Mutations는 상태 관리를 위해 동기적으로 처리하고 비동기적인 처리는 Actions가 담당
• Actions는 비동기 로직의 처리가 종료되면 Mutations를 호출
• 사용 : this.$store.dispatch('ACTIONS_NAME') or ...mapActions 사용