Vuex란

Vuex의 필요성

프로젝트 초반에는 컴포넌트간 데이터 공유가 많지가 않아서 간단한 데이터의 경우 props, ref, emit 또는 EventBus등으로 데이터 전달을 하였는데, 프로젝트 규모가 점점 커지면서 props나 emit으로 구현하기 어려워 지는 부분도 생기고 EventBus의 사용이 많아지면서 출처를 알기 어려워 지는 부분도 생기기도 합니다. 이럴때 Vuex 라이브러리를 사용하여 상태(state)를 관리하면 보다 간편하게 관리 할 수 있습니다. 하지만 Vuex의 상태는 메모리에 저장되는 것이기 떄문에 새로고침시에는 당연히 초기화 되어 사라집니다. localStorage에 따로 저장을 시키거나, vuex-persistedstate 같은 라이브러리를 사용하여 새로고침시에도 상태를 유지할 수 있습니다.

 

Vuex의 요소

1. Dispatch()

• Vue컴포넌트는 Dispatch(‘[action메소드명]’)를 통해 Vuex store의 Action 그룹에 속한 메서드를 실행시킬 수 있습니다.

2. Actions

• API서버 통신과 같은 역할을 수행하는 메소드 그룹입니다.
• 주로 state에 반영하기 전 데이터를 조회하고 가공하는 역할을 수행합니다.
• 비동기적 변이를 다루는 속성입니다.(setTimeout()등 비동기 통신 이용때 사용)
• 비동기적 상태를 추적해야하기 떄문에 commit을 사용합니다.

3. Commit()

• Action메소드 혹은 Vue컴포넌트에서 Commit(‘[mutation메소드명]’)을 통해 Mutation 그룹에 속한 메서드를 실행할 수 있습니다.
• 컴포넌트에서는 $store.commit(), Actions 메소드에서는 첫번째 인자로 넘겨받는 context.commit()으로 트리거시킵니다.
  
  

4. Mutations

• Vuex store의 상태(state)를 변경시키기 위한 메서드 집합입니다.
• Vuex는 state의 조작은 오로지 Mutation의 메소드를 통해 수행하길 권장합니다.
• 따로 mutate 메서드는 없고, 첫 번째 인자로 받는 [state요소]로 수정합니다. 두번째 전달인자를 받을 수 있습니다.
• methods에 등록한다.
• 동기적 변이를 다루는 속성입니다.
• 상태의 변이를 추적하기 위해 commit을 사용합니다.

5. state

• 사용자가 정의한 상태를 저장합니다
• 즉각반응형이기 때문에 v-model 의 computed 메서드중 get()이 선언되어 있다면 즉각적으로 반응합니다.
• Vue컴포넌트의 watch처럼 $store.watch로 변화를 감지하고 핸들링할 수 있습니다.
  

6. getters

• 여러 컴포넌트에서 동일한 computed를 통해 하나의 state를 가져와야 한다면 Vuex store에 getters를 등록하여 computed처럼 활용할 수 있습니다.
• 첫 번째 인자로 state를 받습니다. 따로 두번째 전달 인자를 받을 수 없고, mutations와의 차이점이기도 합니다.
• computed에 등록한다.

7. modules

• 하나의 스토어만을 사용해 모든 Dispatch, Commit을 처리한다면 전역 이벤트 버스와 다를 것이 없습니다.
• 따라서 각 목적에 맞는 항목을 module로 분리할 수 있고 namespaced속성을 true로 설정하여 각 모듈의 이름을 포함한 Dispatch, Commit, state조회 등을 수행할 수 있습니다.
  
  

Vuex 작동 구조

 

Vuex다이어그램