Nuxt and Vuex

vuex 상태 관리 다이어그램
Vuex 앱의 상태를 핸들링하기 위한 일방 통행길을 제공한다. 글로벌 변수의 직접 변경을 방지하기 위한 방법이라고 말하는 사람들이 많은데, 정확한 표현은 아니다. Nuxt 에서 store 폴더 안의 .js 파일에는 대개 일반적으로 위 다이어그램 녹색 점선안의 state, mutations, actions 를 정의해 놓는다. 컴포넌트가 렌더링 될때는, Vuex 의 state 에 접근할 수 있기 때문에 그 컴포넌트가 동작할때 필요한 값을 읽을 수 있고, 렌더링이 된 이후에는 상태값을 변경하기 위한 action 을 dispatch 하여 값을 mutate 할 수 있다.

State

state 는 object 를 리턴하는 간단한 함수다. 일반적으로 포스팅 collection 과 현재 선택한 포스팅 객체 등을 저장하는 장소가 되며, application level 의 single source of true 로 사용한다. 이때 주의할 점은 VueJs 의 reactivity 를 위해서, deeply nested 객체를 가급적 지양해야한다는 것이다. 그렇지 않는다면 shallow copy 한 object 를 다시 assign 해야하는 일이 생긴다. 따라서, thing 에 대해 다양한 mutation 이 있어야만 한다면, state.things.thing 패턴보다는 state.thing 패턴을 사용하는 것이 좋다.

Getters

getter 는 store 를 위한 computed 프로퍼티라고 생각하면 된다. getter 는 computed 프로퍼티처럼 대부분 커스텀 셋터를 사용하지 않고 읽기전용 값들의 조합으로 사용되나 셋터를 사용하는 것도 가능하다. vuex 에는 mapGetters 헬퍼가 있어서, Nuxt 에서 name spaced 스토어를 필요한 getter 들을 computed 프로터티로 불러올 수 있다. 명심할 점은 getter 는 읽기 전용이다. 변경을 하려면, action 을 dispatch 해야 한다.

Mutations

mutation 은 synchronous 하게 store 의 상태값을 변경하는 함수 들이다. mutation 은 상태 변경을 commit 하는 것이고 각각의 commit 은 synchronous 한 동작이다. 이에 반하여, 아래에 설명할 actions 은 일련의 asynchronous 한 작업을 수행 후, mutation commit 을 호출한다. mutation 은 reactive 이벤트 이므로, 이를 직접 commit 하면 안된다. mapGetters 헬퍼와 비슷한 mapMutations 헬퍼가 있다.

Actions

action 은 백앤드 API 를 호출하여 결과값을 불러오는 것과 같은 asynchronous 한 상태변경을 위하여 사용한다.

Leave a Reply