[Udemy Vue 완벽가이드 Section15] 216. payload를 사용하여 변형(Mutation)에 데이터 전달

어떤 변형(Mutation) 메서드는 인수를 요구하기도 한다.

'increment' mutation에서는 더하고자 하는 값인 2이 하드코딩 되어있다.

// main.js
mutations: {
  increment(state) {
    state.counter = state.counter + 2;
  },
},

 

'increase' mutation을 추가하여 똑같은 state를 인수로 하고, 

여기에서도 counter를 바꾸고 싶다.

하지만 이번에는 하드코딩된 값이 아닌, mutation이 commit될 때 정의한 값을 더하고 싶다.

 

 

# mutation에 데이터 전달방법

1/ mutation에 두 번째 인수인 payload를 추가한다.

가할 수 있는 데이터 패키지이다.

(물론 이름은 'payload' 말고, 원하는대로 지어도 된다.)

- payload의 타입은 무엇이든 상관없다. number, string, object 전부 올 수 있다.

이번에는 value 프로퍼티가 있는 객체라고 가정해보자.

// main.js
mutations: {
  increment(state) {
    state.counter = state.counter + 2;
  },
  increase(state, payload) {
    state.counter = state.counter + payload.value;
  },
},

 

 

2/ commit 시, 두 번째 인수인 payload를 넣는다.

App.vue에서 increase mutation을 commit해보자.

그리고 counter를 10만큼 더해보자.

컴포넌트 내부에서 상태를 조작하지 않고, mutation을 활용해야 하는데

데이터 패키지를 payload를 통해 해당 mutation에 전달하여 유연성을 확보한다.

이를 위해 commit에 두 번째 인수인 payload를 넣는다.

<!--App.vue-->
<template>
  <base-container title="Vuex">
    <button @click="addOne">Add 10</button>
  </base-container>
</template>

<script>
//생략
export default {
  methods: {
    addOne() {
      this.$store.commit('increase', { value: 10 });
      //여기서 두 번째 인수는 mutation에서 받는다.
    },
  },
};
</script>

 

이 두 번째 인수는 나중에 mutation에서 받게 된다.

여기 두 번째 인수인 'payload'가 commit으로 전달한 두 번째 인수가 된다.

mutations: {
  increment(state, payload) { //payload는 커밋으로 전달한 두번째 인수가 된다.
    state.counter = state.counter + payload.value;
  },
},

 

 

데이터 형식은 어떤 것이든 상관없다. 여기서 payload는 value를 key로 가진 객체이다.

Add 10을 누르면, increase mutation을 커밋했기 때문에 10씩 증가.

Add 2를 누르면 increment mutation을 커밋했기 때문에 2씩 증가.

 

 

payload는 mutation에 전달되는 추가 데이터이다.

 

 

## commit하는 또다른 방법

다른 방식으로 commit하는 법도 있다. 물론 현재 방식에 문제가 있는 건 아니다.

 

commit을 호출하고, 객체를 전달할 수 있다.

type 프로퍼티 : 필수. 여기에 commit해야 할 mutation의 이름을 넣는다.

추가로 원하는 만큼 많은 프로퍼티를 넣을 수 있다.

예를 들어 value 프로퍼티를 넣을 수 있다. 

그러면 이 객체는 type 프로퍼티는 제외하고, increase mutation의 payload로 제공된다.

// App.vue
methods: {
 addOne() {
  this.$store.commit({
    type: 'increase',
    value: 10,
  })
 }
}

그저 commit하는 방식이 다를 뿐이다. 어떤 방식을 사용해도 무방하다.

 

 

이렇게 상태를 바꾸는 특정 로직을 store안으로 옮겼다.

예시로는 간단한 로직이지만, 이 로직은 굉장히 복잡해질 수도 있다.

 

 

# 정리 및 요약

- 컴포넌트 내부에서 mutation을 commit하여, 컴포넌트 내부에서 상태를 직접 변경하지 않는다.

- 직접 상태를 '변경'하지 않았다는 사실이 매우 중요하다.

- 컴포넌트 내부에서 상태를 직접 '변경'하는 것은 좋지 않다. mutation을 사용해야 한다.

 

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.