Vue의 데이터 교환 2 [Vuex Store]

저번에 이어서 이번에는 전역적으로 사용할 수 있는 방법에 대해 알아보자.

 

1. 부모/자식 컴포넌트 사이에서 호출하기 위한 설정 -> 부모컴포넌트와 자식컴포넌트 사이에는 특별한 호출방식이 있다.
2. 모든 컴포넌트에 적용할 데이터/메소드 설정 -> 전역변수로 생각하면 편하다.
3. 전혀 관계없는 컴포넌트 사이에서 호출하기 위한 설정 -> 아무관계도 아니지만, 전역으로 할 필요는 없는 경우

 

2. 모든 컴포넌트에 적용하기 - Vuex Store

2-1. Vuex란?

Vuex는 Vue.js의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 의도적인 방법으로 상태를 변경 및 관리할 수 있다. React의 Redux와 비슷하다고 보면 된다.

 

컴포넌트는 일반적으로 부모-자식의 관계를 가지고 props와 event를 통해 서로의 데이터를 주고받는다고 하였다.

하지만 Vuex는 말 그대로 중앙 집중식 저장소 이기 때문에 props와 event에 얽매이지 않아도 된다.

컴포넌트의 구조가 복잡한 경우에는 props와 event를 통한 데이터 전달보다는 Vuex를 통해 별도의 저장소에서 데이터를 관리하는 것이 올바르다. 쉽게말해서 전역변수로 지정하면, 어디던지 다 쓸 수 있다는 말.

 

2-2. Vuex 구조

Vuex는 state, mutations, action, getters 4가지 형태로 관리가 되며, 이때 이 관리 포인트는 store 패턴을 사용하고 통상 store라고 불린다. 이 4가지는 서로간의 간접적으로 영향이 있으며 단방향 데이터 흐름으로 볼수 있다.

 

여기서는 간단하게 4가지의 개념만 소개하겠다. (사용방법은 다른 블로그 참조)

 

1. State

State는 Vue 컴포넌트에서 data로 볼 수 있다. 

원본 소스의 역할을 하며, View와 직접적으로 연결되어있는 Model이다. 

이 state는 직접적인 변경은 불가능하고 mutation을 통해서만 변경이 가능하다.

mutation을 통해 state가 변경이 일어나면 반응적으로 View가 업데이트된다.

 

핵심 : 쉽게 말해 변수라고 생각하면된다. 이 값을 바꾸려면, mutation의 함수를 통해서만 바꿀 수 있다.

 

2. Mutations

Mutation은 state를 변경하는 유일한 방법이고 이벤트와 유사하다. 

mutation은 함수로 구현되며 첫 번째 인자는 state를 받을 수 있으며, 두 번째 인자는 payload를 받을 수 있다. (payload는 변경하고 싶은 값을 뜻함)  (동기처리 기준)

여기서 payload는 여러 필드를 포함할 수 있는 객체형태도 가능하다.

이 mutation은 일반적으로(Helper를 쓰지 않는 경우)는 직접 호출을 할 수 없으며, commit을 통해서만 호출할 수 있다.

 

결론 : 변수를 바꾸는 함수. 쉽게 setter라고 이해하면 편하다.

호출 방식 : commit (state, payload)

 

3. Action

Action은 mutation과 비슷하지만 mutation과는 달리 비동기 작업이 가능하다. 

또한 mutation에 대한 commit이 가능하여 action에서도 mutation을 통해 state를 변경할 수 있다.

action에서는 첫 번째 인자를 context 인자로 받을 수 있으며 이 context에는 state, commit, dispatch, rootstate와 같은 속성들을 포함한다. 두 번째 인자는 mutation과 동일하게 payload로 받을 수 있다.

 

commit을 통해 mutation을 호출했다면 Action은 dispatch를 통해서 호출한다.

context의 속성을 보면 dispatch가 있는 것으로 보아 action에서는 서로 다른 action을 호출할 수 있다는 것을 볼 수 있다.

 

결론 : Mutation을 호출하는 함수. 비동기 작업에 사용되므로, 주로 Action을 호출해서 Mutation을 실행시킴

호출 방식 : dispatch('함수명', '전달인자')

 

4. Getters

Getters는 쉽게 Vue 컴포넌트에서 Computed로 볼 수 있다. 

말로 풀자면 계산된 속성인데 getter의 결과는 종속성에 따라 캐시 되고 일부 종속성이 변경된 경우에만 다시 재계산된다.

즉, 특정 state에 대해 어떠한 연산을 하고 그 결과를 View에 바인딩할 수 있으며, state의 변경 여부에 따라 getter는 재계산이 되고 View 역시 업데이트를 일으킨다.

이때 state는 원본 데이터로서 변경이 일어나지 않는다.

 

결론 : state를 수정하고 나서 값을 업데이트 할 때 확인용으로 호출 (잘안쓰는 것 같음..)

호출 방식 : this.$store.getters['경로/함수명']

 

 

데이터 흐름

 

이렇게 전반적인 vuex store에 대한 개념을 알아봤다. 마지막으로는 잘 안쓰이지만, 알아두면 좋을 EventBus에 대해 설명하겠다.

 

 

참고 블로그 :

https://kdydesign.github.io/2019/05/09/vuex-tutorial/

http://ccambo.github.io/Dev/Vue/5.what-is-the-store-in-vuex/