Vuex

- 기존: 부모 자식 관계의 컴포넌트가 많아진다면 데이터의 전달 부분이 복잡해짐: prop, emit 많아짐

- 애플리케이션이 여러 컴포넌트로 구성되고, 더 커지는 경우 데이터를 공유하는 문제 발생

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

Vuex가 무엇인가요? | Vuex

- Vue.js 애플리케이션에 대한 상태관리패턴+라이브러리

- 애플리케이션의 모든 컴포넌트들에 대한 중앙 집중식 저장소 역할 (데이터 관리)

---

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

상태: 앱을 작동하는 원본 소스 (Vue의 Data)

뷰: 상태의 선언적 매핑 (DOM)

액션: 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법 (Vue의 Method - Actions: 동기, Mutations: 비동기)

Actions(비동기)가 끝나는 시점에 Mutations(동기)를 호출 → state(data)가 갖고 있는 데이터를 변경

---

설치

npm install vuex --save

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)	// Vuex 명시적으로 추가

---

Store(저장소)

- 애플리케이션 상태를 보유하고 있는 컨테이너

 

· 일반 전역 객체와 다른 점

- 반응형: Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트 함

- 저장소의 상태 직접 변경 불가능: 저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

store.commit('increment')

console.log(store.state.count) // -> 1

store.state.count를 직접 변경하는 대신 변이 수행 → 명시적으로 추적 → 코드를 읽을 때 상태 변화를 더 잘 지켜볼 수 있음

상태	단일 상태 트리 사용 → 애플리케이션 수준의 상태를 포함하여 원본 소스의 역할을 함 → 각 애플리케이션마다 하나의 저장소만 가짐
Getters	저장소의 계산된 속성 (Vue의 computed와 비슷) getter의 결과는 종속성에 따라 캐쉬되고, 일부 종속성이 변경된 경우에만 다시 재계산 됨
변이(mutations)	실제로 상태를 변경하는 유일한 방법
액션	상태를 변이시키는 대신 액션으로 변이에 대한 커밋 (비동기) 액션도 state를 변경할 수 있긴 함. (하진 않음)
모듈