Vuex - Mutations

Vuex - Mutations

---

Vuex의 데이터(state) 값을 변경하는 로직들을 의미한다.

Getters와의 차이점은 아래와 같다.

1. 인자를 받아 Vuex에 넘겨줄 수 있다
2. computed가 아닌 methods에 등록한다.

그리고 추후 챕터에 작성할 Actions와의 차이점은 아래와 같다.

1. Mutations는 동기적 로직을 정의
2. Actions는 비동기적 로직을 정의

Mutations의 성격 상, 안에 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수가 있다.

지금까지 counter의 값을 조작할 때 아래와 같이 작업을 했었다.

return this.$store.state.counter++;

이러한 작업방식은 안티패턴이라고 불리는데, Vue의 Reactivity 체계와 상태관리 패턴에 맞지 않은 구현 방식이다.

안티패턴인 이유는 여러 개의 컴포넌트에서 같은 state 값을 동시에 제어하게 되면, state 값이 어느 컴포넌트에서 호출해서 변경된건지 추적하기가 어렵기 때문이다.

상태관리 패턴에 맞게 개발하면 테스팅, 디버깅, Vue의 Reactive 성질 준수의 혜택을 얻을 수 있다.

따라서 이제부터 state의 데이터를 변경해야할 때에는 commit을 이용하여 state를 변경해야한다.

(Commit을 통해 Mutations을 거쳐 state의 데이터를 변경하는 과정)

Mutations 등록

---

getters와 마찬가지로 Vuex에 mutations 속성을 정의한다.

Mutations 사용

---

App.vue의 기존 코드는 addCounter에서 state의 counter 값을 바로 접근하여 1을 증가시키는 코드였다.

state를 컴포넌트에서 직접 접근하여 증가시키는 안티패턴을 앞에서 등록한 mutations를 이용하는 코드로 바꿔보자.

1. this : 뷰 인스턴스의
2. $store : Vuex의 store 객체의
3. commit('addCounter') : 커밋 함수를 이용하여 mutations 속성에 정의한 addCounter를 실행시킨다.

여기서 한가지 의문이 생긴다.

this.$store.mutations.addCounter;

우리는 이전까지 this.$store.getters.getCounter나 this.$store.state.counter 와 같이 호출하던 방식처럼 mutations 속성을 통해 직접 호출하지 않고, commit()을 이용하여 mutations 이벤트를 호출했다는 점이다.

이는 추적 가능한 상태 변화를 위해 프레임워크가 이러한 방식으로 구조화가 되어 있다는 것이다. (그냥 그렇구나 하고 기억하고 넘어가면 된다.)

왜 mutations 속성을 통해 직접 이벤트를 호출할 수 없을까?

그건 this.$store를 console.log()로 찍어보면 알 수 있다.

console.log()로 확인해보면 mutations은 앞에 언더바 ( _ )를 붙이고 있다.

자바스크립트에서 언더바를 붙이는 함수나 속성의 의미는 '내부에서만 사용하는 기능이라는 것을 표시하는 것'이다.

즉 내부에서 호출하여 사용할 수는 있으나, 외부에서 해당 함수나 속성에 접근하여 사용하는 것을 차단한다.

정말로 그러는지 한번 확인해보자.

App.vue에서 addCounter() 메소드에 아래와 같이 _mutations 속성에 접근하여 Vuex에 정의한 addCounter를 호출해보자.

그리고 애플리케이션을 실행하여 addCounter()가 수행될 수 있게 버튼을 클릭해보면 연산처리가 작동하지 않는 다는 것을 알 수 있다.

Vue 프레임워크 내부에서는 mutations이 작업을 수행하지만 외부에서 _mutations을 통하여 일을 시켜도 일을 진행하지 않는다.

Mutations에 인자 넘기기

---

각 컴포넌트에서 Vuex의 state를 조작하는데 필요한 특정 값들을 넘기고 싶을 때는 commit()에 두번째 인자를 추가하면 된다.

App.vue

이와 같이 두번재 인자로 데이터를 던지면 Vuex에선 다음과 같이 받을 수 있다.

두번째 인자명으로는 payload라고 작명하는 편이므로 payload라고 작성해서 쓰도록 하자.

mapMutations

---

mutations도 mapGetters처럼 mapMutations가 존재한다.

이 역시 코드의 가독성을 높일 수 있으나, 다양한 제약사항들, 조건들이 필요하므로 필요한 경우 아래의 참고 링크를 보고 찾아보도록 하자.

참고 - 

https://joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/