Vuex 시작하기(1) - Vuex란 ?

- Vuex란 무엇인가 ?

• Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리
• 모든 컴포넌트에 대한 중앙 집중식 저장소 역할
• 예측 가능한 방식으로 상태 변경
• 다른 상태관리 라이브러리와는 달리 Vue.js가 효율적인 업데이트를 위해 세분화된 반응 시스템을 활용하도록 특별히 고안된 라이브러리

 

- 상태 관리 패턴이란 ?

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

• 상태: 앱을 작동하는 원본 소스
• 뷰: 상태의 선언적 매핑
• 액션: 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법

단방향 데이터 흐름

 

- 한계점: 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우

• 여러 뷰는 같은 상태에 의존
  • 지나치게 중첩된 컴포넌트를 통과하는 prop는 장황할 수 있으며 형제 컴포넌트에서는 작동하지 않음
    
    
• 서로 다른 뷰의 작업은 동일한 상태를 반영해야 할 수 있음
  • 직접 부모/자식 인스턴스를 참조하거나 이벤트를 통해 상태의 여러 복사본을 변경 및 동기화 하려는 등의 해결 방법을 사용해야 함. 이러한 패턴은 모두 부서지기 쉽고 유지보수가 불가능한 코드로 빠르게 변경됨

 

- 해결방법: Vuex

• 컴포넌트에서 공유된 상태를 추출하고 이를 전역 싱글톤으로 관리
  • 컴포넌트 트리는 커다란 뷰가 되며 모든 컴포넌트는 트리에 상관없이 상태에 엑세스하거나 동작을 트리거 할 수 있음

 

[ 참고자료 ]

https://next.vuex.vuejs.org/

What is Vuex? | Vuex