vue에서 컴포넌트 간 통신은 props와 emit을 통해서 주고받는다. 이는 부모-자식 관계가 아닌 전혀 다른 컴포넌트에게 파라미터 또는 값을 전달할 수가 없다는 문제점이 있다. 이런 문제점을 해결하기 위해서는 흔히 우리는 Vuex와 Event Bus를 사용한다. Vuex는 상태 관리 패턴 라이브러리로 Flux 아키텍처를 따른다. Event Bus는 비 부모-자식 간 컴포넌트 통신을 하는 데 사용된다.

이번 포스팅에서는 Vuex의 개념을 살펴보고 설치부터 실무에서의 사용 방법까지 예제를 통하여 알아보도록 하자. Vuex는 작성 방법에 따라 형태가 조금씩 다르며 공식 API 를 통해서만은 실무에 반영하기가 어렵다.Vuex는 Vue.js의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 의도적인 방법으로 상태를 변경 및 관리할 수 있다. Vuex는 기존 Flux의 아키텍처를 따라가고 있고 React로 본다면 Redux와 비교 대상으로 볼 수 있다. Vue.js에서도 Redux를 사용할 수 있지만 Vue.js는 Vuex와의 호환이 좋을 뿐만 아니라 더 직관적으로 개발할 수 있다.

Vue.js의 상태 관리 패턴인 Vuex에서 Store의 state를 초기화하는 방법에 대해 알아보자.Vuex Store에서 state는 원본 데이터 즉, 모델의 역할을 하며 mutation에 의해 변경이 가능하다. state는 최초에 명시되어 있어야 하며, 때로는 기본값을 가지고 있다. 이러한 state를 mutation에 의해 변경을 하고 이후 어떠한 작업을 하더라도 초기화되지 않는다. 그렇기 때문에 해당 stat를 다시 사용한다면 이전 값이 남아있다. 그렇기 때문에 state의 초기화는 필수적이다.
이번 포스트에서는 state를 초기화하는 효율적인 방법에 대해 알아보자.

Vue.js의 Vuex Store 패턴에서 Vue.js Component에 Store를 바인딩 시키는 여러가지 방법을 알아보자. Vuex의 Store를 Component에 바인딩하는 방법에는 여러가지가 있으며 상황에 따라 그 쓰임이 다르다. 그 중에서 가장 실무에 적합하고 가독성이 좋은 방법이 무엇인지 알아보고 활용해보자.해당 포스트에서는 Vuex의 설명과 사용법에 대해서는 언급하지 않았으며, 오로지 Vuex Store를 컴포넌트에 바인딩하는 방법을 설명한다.
프로젝트의 규모가 크거나 작든 Vuex를 사용할 때는 Store를 Module 별로 분리하는 것이 바람직하다. 그렇지 않으면 각 컴포넌트마다 바인딩 된 Store의 state들이 다른 컴포넌트의 루틴에 의해 오염될 가능성과 코드의 복잡성이 높아지게 되어 있다.
이번 포스트에서는 모듈별로 분리된 Store를 각 컴포넌트에서 효율적으로 바인딩시키는 여러 가지 방법들과 코드 스타일을 알아보자.