컴퍼넌트가 많아지면서 데이터 통신을 관리하기가 어렵기 때문에 props와 emit 이외에 vue에서 제공하는 vuex를 통해 상태관리를 하는것이 유용하다고 생각했습니다. 가이드를 보고 참고 하면서 작업을 마치긴 했지만 인수인계하면서 다시 설명하려하니 가물가물 하고 개념이 안잡혔다는 생각이 들어 개인적으로 한번 더 공부도 할 겸 확실하게 정리하고자 포스팅 합니다.

부모에서 받은 데이터를 자식에서 바로 수정이 되지 않기 때문에 부모로 데이터를 보내고 다시 부모로부터 데이터를 받아야 수정이 가능합니다. 그렇기 때문에 이벤트 버스를 사용 하는데 컴퍼넌트가 많아지면 추척하기 쉽지 않아 vuex를 사용하여 관리합니다.

State

컴퍼넌트 간의 공유되는 data의 역할을 합니다.

Getters

각 컴퍼넌트의 computed에 정의되며 state의 값을 가져옵니다.

Mutations

state 관리에 주안점을 두고 있습니다.
전달인자(payload)를 갖을 수 있습니다.
동기 처리 일 때 각 컴퍼넌트의 methods에 정의 됩니다.

Actions

비동기 처리 일 때 각 컴퍼넌트의 methods에 정의 됩니다.
Mutation을 실행시키는 역할을 합니다.
Mutation에 비동기 처리가 포함되면 여러개의 컴퍼넌트에 변경 요청이 올 경우 변경 순서 파악이 어렵기 때문에 Actions에서 처리합니다.