VUEX (2) - Vuex의 Store Pattern 및 사용법

👉Mutation

Mutation은 state를 변경하는 유일한 방법이고 이벤트와 유사하다.
우선 mutation이라는 것을 왜 사용하는 걸까? 이것은 예를들어 state에서 만들어진 함수를 getters에서 사용할 때 계속해서 반복되는 함수가 있다. 이것이 getters에서 여러개의 component에서 사용될 시에 각각의 component에서 따로 지정해주는 방식으로 진행되는데 이러한 귀찮음을 줄여주기위해 사용하는 것이 바로 mutation이라고 볼 수 있다.

즉, 같은 기능을 하는 함수를 mutation에 만들어놓고 그 mutation은 각각 필요한 component에서 실행시켜 state값을 변화시키는 방식으로 진행한다. 이때, 이 실행시키는 과정을 commit이라고 한다.

이렇게 되면 같은 기능을 하는 함수들은 각각의 component에서 쓰지 않고 mutation을 불러오기만 하면 되니 훨씬 더 간단하게 코드를 작성할 수 있다. 

mutation은 함수로 구현되며 첫번째 인자는 state를 받을 수 있으며, 두번째 인자는 payload를 받을 수 있다. payload에 대해 자세한 사용법은 아래에 적어 놓겠다. anyway! 여기서 payload는 여러 필드를 포함할 수 있는 객체형태도 가능하다. 이 mutation은 일반적으로(Helper를 쓰지 않는 경우)는 직접 호출을 할 수 없으며, commit을 통해서만 호출할 수 있다. 대부분 실무에서는 mutations에서는 API를 통해 전달받은 데이터를 가공하여 state를 설정하는데 많이 사용된다.

사용방법

1. 우선 store.js에서 mutation에서 사용할 함수를 만들어 준 후 인자에 state,payload를 준다

payload는 인자의 값을 넘겨받는 짐을 받는 곳이라고 생각하면 되는데, 이에 대한 더 자세한 설명은 아래의 블로그에서 나와 있다. 

Vuex - 4 - Mutations / Payload | HEROPY

 

👉Actions

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을 호출할 수 있다는 것을 볼 수 있다.실무에서 actions은 Axios를 통한 API 호출과 그 결과에 대해서 반환(return)을 하거나 mutation으로 commit하여 상태를 변경하는 용도로 사용된다.

👉Getters

Getters는 쉽게 Vue 컴포넌트에서 반복되는 코드를 줄여주는 기능인 Computed와 같은 기능이라 볼 수 있다. 말로 풀자면 계산된 속성인데 getter의 결과는 종속성에 따라 캐시 되고 일부 종속성이 변경된 경우에만 다시 재계산된다. 즉, 특정 state에 대해 어떠한 연산을 하고 그 결과를 View에 바인딩할 수 있으며, state의 변경 여부에 따라 getter는 재계산이 되고 View 역시 업데이트를 일으킨다. 이때 state는 원본 데이터로서 변경이 일어나지 않는다.

사용방법

1. 우선 store.js에서 state와 mutation 사이에 getters를 선언해준다. 

2.getter 안에 사용하고 싶은 것을 함수 형식으로 적어준다. 

여기에서 중요한 점은 computed의 경우에는 data에에서 가져올 값들을 this.~~해서 가져올 수 있지만 getters에서는 속성 state나 mutation에서 있는 어떤 것을 사용하려면 function 뒤에 있는 괄호 즉 매개변수(parameter)에 그 값을 사용하겠다는 선언을 해주어야 한다.

예를들어 state 속성의 것을 사용해서 이것의 길이를 지정해주는 함수를 정한다고 할 때

state: {
  이름: [
  	{id: '1', pw: '123', name: 'H'},
    {id: '', pw: '123', name: 'A'}
  ]
},
getters: {
  이름수정: function(state) {
  return state.이름.length
	}
},
mutation: {
}
.
.
.

 

3. 코드에서 getters에서 지정해준 함수를 아래와 같이 변경해준다. 

변경전

<div>
  <h1>입력해주세요 {{$store.state.이름.length}}</h1>
</div>

변경후

<div>
  <h1>입력해주세요 {{$store.getters.이름수정}}</h1>
</div>

실무에서도 state의 연산 처리가 필요한 내용에 대해 getter를 사용하지만 getters의 경우 대용량 처리 시에 퍼포먼스와 연관이 되어있으므로 조심해야 한다. 대용량 처리에 관련해서는
[Vue.JS] 대용량 데이터의 처리 방법과 성능 최적화 방법 (Vue.js Performance) 를 참고하자.

여기까지 해서 Vuex에 대한 개념을 알아보았다. Vuex의 주요 핵심은 중앙 집중식 저장소이며 이에 따라 state, action, mutations, getters의 개념과 흐름만 파악하면 무리 없이 진행할 수 있을 것이다.