[vuex] State

1. 단일 상태 트리 (Single State Tree)

Vuex는 단일 상태 트리(single state tree)를 사용합니다. 즉 이말은, 하나의 객체가 모든 어플리케이션의 state를 포함하고 이 객체가 하나의 원본 소스(single source of truth)입니다. 하나의 어플리케이션은 하나의 store만 가진다는 것을 의미합니다. 단일 상태 트리는 특정 state를 바로 찾을 수 있게 만들고, 현재 앱의 state의 스냅샷을 가져올 수 있어 디버깅을 간편하게 만듭니다.

2. Vuex의 state를 Vue 컴포넌트에 가져오기

Vuex의 store를 Vue 컴포넌트에서 사용할 수 있는 가장 간단한 방법은 computed 속성을 사용하는 것입니다.

// Counter 컴포넌트를 만듭니다
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

store.state.count가 변경 되면, computed 속성이 다시 평가되고, DOM이 업데이트 됩니다. 그러나 이 패턴은 전역 store 싱글톤에 의존적이게 됩니다. 컴포넌트에서 사용하기 위해서는 store를 사용하는 모든 컴포넌트에서 store를 import해야 합니다.
Vuex는 store 옵션(Vue.use(Vuex)에 인해 가능)으로 루트 컴포넌트의 모든 자식 컴포넌트에 store를 주입하는 메커니즘을 제공합니다.

const app = new Vue({
  el: '#app',
  // "store" 옵션을 사용하여 저장소를 제공하십시오.
  // 그러면 모든 하위 컴포넌트에 저장소 인스턴스가 삽입됩니다.
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

루트 인스턴스에 store 옵션을 제공함으로써, 루트 컴포넌트의 모든 자식 컴포넌트에서는 this.$store를 사용할 수 있게 됩니다.

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

위의 코드와 같이 store.state.count에서 this.$store.state.count로 store를 this.$store로 대체 할 수 있게 됩니다.

3. mapState

컴포넌트에서 여러개의 state나 getter를 사용해야 할 때가 있습니다. 그럴 때 모두 computed 속성에 정의하면 코드가 장황해 질 수 있습니다. mapState를 사용하면 이러한 문제를 해결 할 수 있습니다.

// 독립 실행 형 빌드에서 헬퍼가 Vuex.mapState로 노출됩니다.
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 화살표 함수는 코드를 매우 간결하게 만들어 줍니다!
    count: state => state.count,

    // 문자열 값 'count'를 전달하는 것은 `state => state.count`와 같습니다.
    countAlias: 'count',

    // `this`를 사용하여 로컬 상태에 액세스하려면 일반적인 함수를 사용해야합니다
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

computed 속성에 매핑된 이름과 state의 하위 트리 이름이 같을 때 (예를 들면, store.state.count를 computed 속성의 count에 매핑하려고 할 때 count 이름이 동일합니다.) mapState에 string 배열을 넘길 수도 있습니다.

computed: mapState([
  // this.count를 store.state.count에 매핑 합니다.
  'count'
])

위의 코드와 같이 더욱 간단하게 코딩 할 수 있게 됩니다.

객체 전개 연산자

mapState는 객체를 반환합니다. mapState의 반환값을 computed 속성에 할당하기 때문에, 이제까지 이야기한 방법으로는 다른 computed 속성을 사용할 수 없습니다. 다른 computed 값들과 store의 값들을 computed에 정의하여 함께 사용하고 싶을 때, 객체 전개 연산자 (Object Spread Operator)를 사용하면 됩니다.

computed: {
  localComputed () { /* ... */ },
  // 이것을 객체 전개 연산자(Object Spread Operator)를 사용하여 외부 객체에 추가 하십시오.
  ...mapState({
    // ...
  })
}

4. 컴포넌트는 여전히 로컬 state를 가질 수 있습니다.

(여기서 state는 어플리케이션의 정보를 담고 있는 무언가..라는 의미로 사용하였습니다.)
Vuex를 사용한다고 해서 모든 state를 Vuex의 store에 저장해야 하는 것은 아닙니다. state가 단일 컴포넌트에만 사용하는 경우나 다른 컴포넌트에서 사용하지 않는 state의 경우에는 로컬 state를 사용할 수 있습니다.

참고

• https://vuex.vuejs.org/kr/guide/state.html