Vuex state

1 개요

Vuex state

Vuex 상태

• Vuex는 단일 상태 트리를 사용한다.
  • 이 단일 객체는 모든 애플리케이션 수준의 상태를 포함하며 "원본 소스" 역할을 한다.
  • 이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미한다.
  • 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으므로 디버깅을 위해 현재 앱 상태의 스냅샷을 쉽게 가져올 수 있다.
• 단일 상태 트리는 모듈성과 충돌하지 않는다.
  • 상태(state)와 변이(mutation)를 하위 모듈로 분할할 수 있다.

2 예시 1

<div id="app">
  <span>{{ count }}</span>
</div>

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/vuex/dist/vuex.min.js"></script>
<script>
const store = new Vuex.Store({
  state: {
    count: 1
  }
})
new Vue({
  el: '#app',
  store,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
})
</script>

3 예시 2

<div id="app"></div>

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/vuex"></script>
<script>
const store = new Vuex.Store({
  state: {
    count: 1
  }
})

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

const app = new Vue({
  el: '#app',
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
</script>

4 참고

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