Vuex 알아보기(2) - mutations & getters

이번 시간에는 vuex에서 mutations에 대해서 알아보겠습니다.

 

지난번 포스트에서는 state에 대해 알아봤는데요. (store.js 사용)

state는 상태관리를 하는 항목이 들어가는 곳입니다.

그러면 state에 데이터를 넣어주면 어느 vue파일에서든지 끌어와서 쓸 수 있게 됩니다.

 

그리고, state에 넣어준 데이터가 변경이 되는 경우가 있을 수도 있습니다.

그런데 각각의 vue 파일에서 state 값을 변경하면 어떻게 될까요?

코딩하는 당시에는 편할 수 있겠지만, 나중에 오류가 생겼을 때 해당 vue 파일로 가서 고쳐야 합니다.

이게 큰 문제가 아니라고 생각할 수 도 있지만,

vue 파일이 100개가 있다고 생각해봅시다.

그리고 100개의 파일에서 모두 state 값을 변경했다고 했고 오류가 생긴다면,

100개의 파일을 다 뒤져봐야 할 것입니다.

생각만 해도 끔찍할 것 같네요.

 

그런 안 좋은 일이 발생하는 것을 막기 위해서

state에 넣어준 데이터는 오로지 store.js 파일에서만 바꾸게 하면

오류가 생기더라도 금방 수정이 가능할 것 같습니다.

그리고 vuex에서는 mutations 항목을 이용해서 state의 값을 변경할 수 있습니다.

 

코드로 알아보겠습니다.

// store.js
const store = createStore({
    state() {
        return {
            counter: 1,
        }
    },
    mutations: {
        counterIncrement(state) {
            state.counter++;
        },
    },
})

state에 counter라는 변수가 있다고 가정합니다.

그리고 mutations라는 항목도 만들었고, 그 안에 변경함수도 만들어봤습니다.

이제 vue 파일에서 변경을 시도해봅니다.

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>
      <span>counter : {{ $store.state.counter }}</span>
      <button @click="plusMutations">+</button>
    </p>
  </div>
</template>

<script>
export default {
  methods: {
    plusMutations() {
      this.$store.commit('counterIncrement');
    },
  },
}
</script>

간단하게 작성해봅니다.

mutations에 들어있는 함수를 작동하기 위해서는 $store.commit('함수이름') 을 해줘야 사용할 수 있습니다.

그러면 위의 화면처럼 나올 것이고, + 버튼을 누르면 값이 증가하는 것을 볼 수 있습니다.

응용하면 값이 감소하는 것도 금방 만들 수 있을 것입니다.

 

그러면 우리가 원하는 값으로 변경하고 싶으면 어떻게 해야할까요?

코드가 조금 더 추가되면 됩니다.

counter의 값이 3씩 증가하도록 하게 해보겠습니다.

// store.js
mutations: {
    counterIncrement(state, payload) {
      state.counter += payload;
    },
}
...

// vue 파일
methods: {
    plusMutations() {
        this.$store.commit('counterIncrement', 3);
    },
}

payload라는 변수를 사용하긴 했지만, 다른 이름으로 사용해도 문제없습니다.

그리고 실행해본다면? → + 버튼을 누를 때마다 3씩 증가하는 것을 볼 수 있습니다.

 

이번엔 이름을 바꾸는 예제를 보겠습니다.

// store.js
state: {
    name: 'Kim'
},
mutations: {
    changeName(state, data) {
        state.name = data;
    }
}

// vue 파일

<span>name : {{ store.state.name }}</span>
<button @click="nameChange">change</button>

// ==================================

methods: {
    nameChange() {
        this.$store.commit('changeName', 'Lee');
    },
}

이렇게 코딩을 하고 화면을 실행하면

위의 결과를 볼 수 있을 것입니다.

그리고 change 버튼을 누르게 된다면 Lee로 바뀌는 것을 볼 수 있습니다.

좀 억지 예제이기는 하지만, mutations와 commit이 어떻게 작동하는지 알 수 있도록 해봤습니다.

 

mutations 항목으로 인해 store.js의 코드 양이 길어질 것으로 생각됩니다.

하지만 유지보수 측면에서 생각한다면 당연한 결과일 것 같습니다.

 

mutations 항목 사용법은 어렵지 않으니 반드시 익히고 잘 사용하면 될 것 같습니다.

 

 

 

다음으로 getters 에 대해서 알아보겠습니다.

getters는 state값의 변경을 각각의 vue 파일에서 수행하지 않고, vuex에서 수행하게 하는 것이라고 합니다.

이렇게 하면 코드 가독성이 올라가고, 성능도 좋아진다고 합니다.

 

바로 예시를 통해 알아보겠습니다.

아까 state에서 관리되는 counter 변수가 2배의 값을 요청받아야 하는 경우를 생각해보겠습니다.

// store.js
state: {
    counter: 1,
}
getters: {
    getDouble(state) {
        return state.counter * 2;
    }
}

// vue 파일
<span>double counter : {{ $store.getters.getDouble }}</span>

코드를 다음과 같이 작성한 후 실행해 본다면

이런 결과값을 얻는 것을 볼 수 있습니다.

 

근데 {{ }} 안에는 최대한 간결하게 적어야 한다고 합니다.

그래서 computed 속성을 사용해서 간결하게 해봅니다.

// vue 파일
<span>double counter : {{ getDoubleCounter }}</span>

<script>
  computed: {
    getDoubleCounter() {
      return this.$store.getters.getDouble;
    }
  },
</script>

computed 속성을 사용해서 코드를 수정했고, 결과는 동일한 것을 확인할 수 있습니다.

computed 속성까지 사용했으니 캐싱을 통해 성능이 더 좋아진다고 합니다.

 

getters에 대해서 알아봤는데,

코딩할 때는 computed에서 쓰는 것처럼 비슷하게 사용하면 되지 않을까 싶습니다.

(getters 속성에 대해서는 얕게 공부했기 때문에 더 깊이있게 작성은 못할 것 같습니다.)

 

 

 

이렇게 mutations와 getters에 대해서 알아봤습니다.

 

 

 

 

 

 

출처 : 코딩애플 - 인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드