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

vue.js에서 provide/inject api는 보통 많이 사용하지는 않는다. 핵심적인 요소 간주하기에는 무언가 부족하기 때문이기도 하며, Vue.js 공식 문서에는 provide/inject는 일반 애플리케이션 코드에 사용하지 않는 것이 좋다고 명시되어있기 때문이다. 하지만 모르는 것보다 아는 것이 이득이며 때로는 이 provide/inject가 도움이 되기 때문에 이번 포스팅에서 언급하였으며, 몇 가지 얘기해 보려 한다.

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