[Vue.js] VUEX Store란

 

Vuex

 

Vue 개발에서 상태를 관리해주는 기능을 제공해주는 패턴이자 라이브러리

어플리케이션의 모든 컴포넌트들에 대한 중앙 집중식 저장소의 역할 및 관리 담당

 

Vuex가 없다면 컴포넌트 간의 데이터(상태)를 주고 받기 위해서

부모는 자식엣 props, 자식은 부모에게 emit event 방식을 사용해서 처리해야 한다.

간단한 어플리케이션의 경우 괜찮을 수 있지만,

대규모 어플리케이션이라면 감당할 수 없을 정도로 복잡해질 수 있다.

이와 같은 상황들을 해결해주는 것이 Vuex라고 생각하면 된다.

즉, 데이터를 Strore라는 저장소를 통해 관리하고

프로젝트에 존재하는 모든 컴포넌트들이 이 Store를 공유하는 것이다.

 

 

 

State, Mutations, Actions, Getters

 

 

State

• 컴포넌트 간 공통으로 참조하기 위한 변수를 정의한 것
• 프로젝트의 모든 곳에서 이를 참조하고 사용할 수 있다.
• 모든 컴포넌트들에서 공통된 값을 사용할 수 있다.

 

 

Mutaions

• State 변경을 담당한다. (반드시 Mutations를 통해서만 State를 변경해야 한다.)
• 동기 처리 기준이다.
• commit('함수명', '전달 인자') 방식으로 호출한다.
• mutations 내에 함수들을 작성한다.

 

 

Actions

• Mutation을 실행시키는 역할을 담당한다. (Mutation 트리거)
• 비동기 처리 기준이다.
• dispatch ('함수명', '전달인자') 방식으로 호출한다.
• Actions 내에 함수들을 작성한다.
• 비동기 기준이므로 주로 콜백 함수로 작성한다.

 

 

Getters

• 각 컴포넌트의 계산된 속성 (computed)의 공통 속성으로 정의
• 여러 컴포넌트에서 동일한 computed가 사용될 경우 Getters에 정의해서 공통으로 쉽게 사용 가능
• 하위 모듈의 Getters를 불러오기 위해서는 this.$store.getters['경로명/함수명'] 을 사용 (Store Instance Property 사용)