Vuex 예제

위에 코드는 App.vue(부모)와 Child.vue(자식) 컴퍼넌트로 각 컴퍼넌트의 +,- 버튼을 클릭 시 부모의 버튼을 클릭하면 parent counter의 수가 변경되고 자식의 버튼을 클릭 시 child counter의 수가 변경 되는 내용입니다.
 
이 컴퍼넌트를 부모와 자식 컴퍼넌트의 각각의 버튼을 눌렀을 때 parent counter와 child counter의 수가 동시에 업 다운 되는 기능을 만들어 Vuex로 각 컴퍼넌트 간의 통신이 되도록 하겠습니다.

state

counter 대신 $store.state.counter를 사용하여 store의 state에 접근할 수 있습니다.

getters

위 코드는 App.vue와 Child.vue에서 숫자 표시를 computed에 정의한 getCounter로 표시하면 store에 저장된 state의 counter를 공통으로 바라보지만 computed에 같은 코드를 중복해서 호출하게 됩니다.

지금은 간단한 코드이지만 계산이 들어가거나 할 경우 복잡해질 수 있기 때문에 위 코드처럼 vuex에서 state의 변경을 실행하고 getters를 사용하여 각 컴포넌트에 호출하면 코드 중복을 막을 수 있습니다.
 
getters선언시 속성(state)으로 값에 접근할 수 있으며 두번째 전달인자로 다른 getters도 받을 수 있습니다.