Vuex 핵심 컨셉(1) - 상태

• Vuex는 단일 상태 트리를 사용
• 즉, 이 단일 객체는 모든 어플리케이션 수준의 상태를 포함하여 '원본 소스' 역할
• 각 어플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미
• 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으므로 디버깅을 위해 현재 앱 상태의 스냅 샷을 쉽게 가져올 수 있음
• Vuex Store의 데이터는 Vue 인스턴스의 데이터와 동일한 규칙을 가진다.

 

- Vuex 상태를 Vue 컴포넌트에서 가져오기

• 가장 간단한 방법은 computed 속성 내에서 일부 저장소 상태를 가져오는 것
• store의 값이 변경되면 computed 속성이 다시 변경되고 관련 DOM 업데이트가 트리거 된다.
• Vuex는 store 옵션( Vue.use(Vuex) )으로 루트 컴포넌트의 모든 자식 컴포넌트에 저장소를 주입하는 메커니즘 제공
  • Vue 인스턴스 생성 시, store 옵션을 제공함으로써 저장소는 루트의 모든 하위 컴포넌트에 주입
  • this.$store로 접근 가능

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

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },

  getters: {
      ...
  },

  mutations: {
      ...
  },

  actions: {
      ...
  },
});

// main.js
import store from './common/store';
import Counter from './components/Counter';

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

 

[ 참고자료 ]

https://next.vuex.vuejs.org/guide/state.html

State | Vuex