Vuex

Vuex

• Vue.js Application에 대한 상태관리 패턴 + 라이브러리
• Application의 모든 컴포넌트들의 중앙 저장소 역할을 한다. (데이터 관리)
• 부모, 자식의 단계가 많이 복잡해진다면 데이터의 전달하는 부분이 매우 복잡해진다
• Application이 여러 구성요소로 구성되고 더 커지는 경우에 데이터를 공유하는 문제가 발생하게된다

부모-자식 컴포넌트간의 data 전달

동위 컴포넌트간의 data 전달

상태관리패턴

new Vue({
  // 상태
  data () {
    return {
      count : 0
    }
  },
  // 뷰
  template: `
    <div>{{ count }}</div>
  `,
  // 액션
  methods: {
    increment () {
      this.count++
    }
  }
});

• 상태는 앱을 작동시키는 원본
• 뷰는 상태의 선언적 매핑
• 액션은 뷰에서 사용자입력에 대해 반응적으로 상태를 바꿈
  

Vuex 저장소 개념

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

State

• 저장소에서 data 속성의 역할
• Application에서 공유해야 할 data 관리
• State에 접근 : this.$store.state.data_name

Getters

• 컴포넌트가 Vuex의 state를 직접 접근하는 코드가 중복될 때 사용

getters: {
  countMessage(state) {
    state.count++;
  }
}

사용 : this.$store.getters.countMessage;

Mutations

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

Actions

• 비동기 작업의 결과를 적용하려고 할 때 사용
• Mutations는 상태 관리를 위해 동기적으로 처리하고 비동기적 처리는 Actions가 당담
• Actions는 비동기 로직의 처리가 종료되면 Mutations 호출