[Vue.js] 영화 검색 사이트 예제 - 08. Vuex(Store)
이제 기초적인 뼈대는 만들었으니, 결과를 출력할 공간을 만들어야 한다.
components폴더에 MovieList.vue와 MovieItem.vue 생성
검색을 하면 영화의 포스터와 이름을 묶어서 여러개의 목록으로 출력할 것이므로 두 가지 컴포넌트를 제작한다.
그런데 여기서 문제가 발생한다. Search와 MovieList는 형제 요소인 것.
부모 - 자식 데이터통신에는 props(속성), emits(이벤트)가 사용되고,
상위 - 하위 데이터통신에는 provide - inject를 사용하여 통신이 가능한데
형제 요소 간 데이터통신에는 직접적인 데이터 통신 개념이 없다.
그래서 나온 개념이 Vuex.
What is Vuex? | Vuex (vuejs.org)
What is Vuex? | Vuex
What is Vuex? NOTE This is the docs for Vuex 4, which works with Vue 3. If you're looking for docs for Vuex 3, which works with Vue 2, please check it out here. Vuex is a state management pattern + library for Vue.js applications. It serves as a centralize
vuex.vuejs.org
Vuex(Store, 데이터 저장소)
vuex를 사용하려면 다음의 명령어로 설치해야 한다.
npm i vuex@next초기 세팅
/src/store/ 폴더 생성 후 index.js, movie.js, about.js를 만든다.
store 한 곳에서 모든 페이지의 정보를 다루면 오히려 더 불편하므로, 각 페이지에 대한 저장소 관리는 모듈화 시킨다.
main.js에 vuex사용을 알리기위해 .use(Store)를 추가한다.
이 때 알아두면 좋은 것) import할 때 index.js는 폴더만 설정해도 자동으로 VS Code가 설정해준다.
모듈 구성
모듈의 기본 골자는 위와 같다.
namespaced: Boolean 데이터. 해당 js파일을 모듈처럼 사용할 것인지를 판단한다. true면 모듈처럼 쓴다는 의미.
state: 즉시실행함수. .vue 파일의 data에 해당. 함수형태로 만들어야 오류가 나지 않는다.
getters: 객체 데이터. .vue 파일의 computed에 해당한다. state의 데이터를 바로 사용할 수 없다는 점을 주의한다.
mutations: 객체 데이터. .vue 파일의 methods에 해당한다. state의 데이터는 여기서만 수정 가능하다.
actions: 객체 데이터. .vue파일의 methods에 해당한다. mutations에 해당하는 메소드를 제외한 나머지 메소드. 비동기로 작동한다.
getters
.vue파일의 computed에 해당한다.
state의 데이터를 직접적으로 사용할 수 없어 매개변수를 통해 state를 받아와야한다.
mutations
.vue파일의 methods에 해당한다.
state의 데이터는 mutations에서만 수정할 수 있다는 점에 주의해야 한다.
여기서도 똑같이 state를 매개변수로 받아와야 한다.
actions
mutations를 제외한 나머지 메소드가 여기에 작성된다.
여기서는 해당 모듈을 매개변수로 가져올 수 있는데 (주로 context라는 이름을 사용)
state, getters, mutations 등을 불러올 수 있다.
(mutations는 commit이라는 이름으로 호출한다.)
context를 객체구조분해를 통해 사용할수도 있다.
