Vuex 시작하기(3) - Store

- Store

• 모든 Vuex 어플리케이션의 중심
• 어플리케이션 상태를 보유하고 있는 컨테이너
• Vuex Store와 일반 전역 객체 차이점
  • Vuex.store는 반응형
    • Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트
      
      
  • Store의 상태 직접 변경 불가
    • 저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이
    • 이렇게하면 모든 상태에 대한 추적이 가능한 기록이 남을 수 있으며 툴을 사용하여 앱을 더 잘 이해할 수 있음

 

- 기본 예제: 가장 단순한 저장소

// store/index.js
import { createApp } from 'vue'
import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* your root component */ })

// Install the store instance as a plugin
app.use(store)

// Vue component
methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

• store.commit 메소드로 상태 변경
• store.state.count를 직접 변경하는 대신 mutations를 수행하는 이유는 명시적으로 추적하기 위함
• 모든 mutations를 기록하고 상태 스냅샷을 저장하거나 시간 흐름에 따라 디버깅을 할 수 있는 도구 제공

 

[ 참고자료 ]

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

Getting Started | Vuex