vuex 잘라먹기 - 시작하기

모든 Vuex 응용 프로그램의 중심에는 스토어가 있습니다. "저장소"(스토어)는 기본적으로 응용 프로그램 상태를 저장하는 컨테이너입니다. Vuex 저장소는 일반 전역 개체와 다른 두 가지가 있습니다.

1. Vuex 스토어는 반응이 있습니다. Vue 컴포넌트는 상태를 검색 할 때 저장소의 상태가 변경되면 효과적으로 대응하고 효율적으로 업데이트합니다.
2. 스토어의 상태를 직접 변경할 수는 없습니다. 스토어의 상태를 변경하는 유일한 방법은 명시적으로 뮤태아션을 커밋하는 것입니다. 이렇게하면 모든 상태가 변경되어 추적 가능 레코드가 남을 수 있으며 도구를 사용하여 응용 프로그램을보다 잘 이해할 수 있습니다.

세상 제일 간단한 스토어

// Make sure to call Vue.use(Vuex) first if using a module system

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

이제 store.state에 접속 가능합니다. 그리고 store.commit으로 상태를 바꿀 수 있습니다.

store.commit('increment')

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

다시 말해, store.state.count를 직접 변경하지 않고 뮤테이션으로 커밋하는 이유는 명시적으로 추적하려고하기 때문입니다. 이 간단한 규칙에 따라 의도를 보다 명확하게 표현할 수 있으므로 코드를 읽을 때 앱의 상태 변화를 더 잘 추론 할 수 있습니다. 또한 모든 뮤테이션을 기록하고 상태 스냅 샷을 찍거나 시간 여행 디버깅을 수행 할 수있는 도구를 구현할 수있는 기회를 제공합니다.

컴포넌트에서 저장소 상태를 사용하는 것은 단순히 계산 된 속성 내에서 상태를 반환하는 것입니다. 계산된 속성을 사용하는 이유는 스토어의 상태가 반작용적이기 때문입니다. 변경 사항을 트리거하는 것은 컴포넌트 메소드에서 뮤테이션을 하는 것을 의미합니다.