시작하기 | Vuex

본 게시글은 아래의 글을 필사하였습니다.

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

시작하기 | Vuex

모든 Vuex 애플리케이션의 중심에는 store가 있습니다. "저장소"는 기본적으로 애플리케이션 상태를 보유하고 있는 컨테이너입니다. Vuex 저장소가 일반 전역 개체와 두 가지 다른 점이 있습니다.

1. Vuex store는 반응형입니다. Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트합니다.

2. 저장소의 상태를 직접 변경할 수 없습니다. 저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이입니다. 이렇게 하면 모든 상태에 대한 추적이 가능한 기록이 남을 수 있으며 툴을 사용하여 앱을 더 잘 이해할 수 있습니다.

가장 단순한 저장소

참고
모든 예제는 ES2015 문법을 사용합니다. 사용하고 있지 않은 경우 꼭 사용해야 합니다!

Vuex 를 설치한 후 저장소를 만들어 봅시다. 매우 간단합니다. 초기 상태 객체와 일부 변이를 제공하십시오.

// 모듈 시스템을 사용하는 경우 Vue.use(Vuex)를 먼저 호출해야 합니다.

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

이제 state 객체에 store.state 로 접근하여 store.commit 메소드로 상태 변경을 트리거 할 수 있습니다.

---

커밋(commit) : '범죄를 저지르다'와 같은 뜻이 나올 수 있는데 컴퓨터용어로는 git과 같이 버전이나 형상관리등에 쓰이는 단어로 '(기록·기억·처분·망각 등에) 기록하다, 기억하다'라는 뜻으로 쓰인다. 말 그대로 초기 상태에서부터 언제, 어디서, 어떻게에 대해 바뀌는 모든 상태를 기록한다는 뜻이다. 따라서 메소드 네이밍이 직관적이라고 할 수 있다.

트리거(trigger) : 방아쇠를 당기다, 계기, 촉발시키다 등과 같은 뜻을 지니고 있다. 데이터 베이스에서 많이 쓰이는 용어이며, 위의 예제의 경우 Vuex 저장소는 state에 대한 변경을 추적할 수 있으므로 바꾸는 시점부터 시작된다라는 의미로써 사용된것 같다. 쉽게 말해 "state를 바꿀 수 있다."라는 의미같다.

---

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

다시 말해, store.state.count 를 직접 변경하는 대신 변이를 수행하는 이후는 명시적으로 추적을 하기 때문입니다. 이 간단한 규칙에 따라 의도를 보다 명확하게 표현할 수 있으므로 코드를 읽을 때 상태 변화를 더 잘 지켜볼 수 있습니다. 또한 모든 변이를 기록하고 상태 스냅샷을 저장하거나 시간 흐름에 따라 디버깅을 할 수 있는 도구를 제공합니다.

컴포넌트 안에서 저장소 상태를 사용하는 것은 단순히 계산된 속성 내에서 상태를 반환하는 것입니다. 변경을 트리거하는 것은 컴포넌트 메소드에서 변경을 커밋하는 것을 의미합니다.