Vuex(Store) - 개요, 구성

Vuex(Store) 개요

search부분과 하단 결과 표시 부분은 형제요소입니다.

search부분에서 apply메소드를 통해 결과를 가지고 오는게 search내부에서 표시되는 겁니다.

부모 자식간에 데이터 통신은 props혹은 emit을 사용할 수 있고, 

상위 혹은 하위 component들은 provide혹은 inject을 통해 데이터 통신할 수 있습니다.

 

형제 component들끼리 Vuex를 사용하면 됩니다.

 

지금 프로젝트의 구조도입니다.

보다시피 Home과 MovieList는 부모자식임으로 props, MovieList와 MovieItem도 마찬가지로 props를 사용할 수 있습니다.

Home에서 MovieList를 건너뛰서 MovieItem에 provide/inject를 통해 데이터 통신 가능합니다.

데이터들을 중앙집중식 상태관리화되서 관리되는 장소인 Store에 저장하고, 

Store은 여러 component에 연결해서 데이터를 보낼 수 있습니다.

영화검색 결과뿐만 아니라 개발자소개에 관한 데이터도 저장할 겁니다.

지금은 about과 movie 두개만 있지만 프로젝트 규모가 커질수록 관리하기 힘들 수 있습니다.

이때 데이트들을 module로 분리해서 관리합니다.

 

데이터들은 Store에게는 상태입니다.

전체 흐름은 중앙집중식 상태관리패턴이라고도 불립니다.

Vuex패키지를 설치해서 진행합니다.

즉, 중앙집중식 상태관리 패턴의 라이브러리인 Vuex를 사용할 것입니다.

 

Vuex(Store) 구성

npm i vuex@next

위 명령어를 통해 Vuex 라이브러리 설치합니다.

src폴더 안에 store폴더를 만듭니다. store에 기본 index.js과 movie.js, about,js파일을 만듭니다.

movie.js와 about.js는 모듈로 만들어서 내보내기로 전에 설명했습니다.

 

위에는 movie.js입니다. 속성들을 살펴 보겠습니다.

namespaced는 모듈 필수 속성입니다. true값을 부여하면 모듈로 바뀔 수 있습니다.

 

state는 data와 마찬가지입니다.

 

getters는 computed개념입니다. state의 내용을 가공한 과정을 여기다 담으면 됩니다.

 

mutations와 actions는 methods와 같습니다.

mutations는 위에 관리하는 데이터들을 변경할 수 있으며, 여기서만 데이터를 변경함을 허락하는 의미입니다.

mutations를 실행할 때는 .commit()메소드를 사용합니다.

 

actions는 async, await등 키워드는 없지만 비둥기로 동작합니다.

actions를 실행할 때는 .dispatch()메소드를 사용합니다.

 

store폴더 안의 index.js파일입니다.

vuex패키지에서 createStore메소드를 불러오고 안에 module은 movie와 about을 사용할 것을 명시해줍니다.

 

마지막으로 main.js파일에서 store를 import하고 use할 것을 명시합니다.