[Vuex] vue component에서의 actions, mutations 호출 어떻게 하는 것이 좋을까?

IN DUCK KANG·2021년 2월 11일
0

vuex의 공식 문서를 보면, vue component는 state를 변경하기 위하여 actions를 호출하고, action는 mutations를 호출하고, mutations는 state를 변경한다.

근데 생각해보면 의구심의 드는 부분이 있다. state를 변경하기 위하여 이 절차를 따라야만 한다면 mapMutations는 존재할 이유가 없고, vue 컴포넌트에서 mutations를 직접 호출할 수도 없어야 한다. 하지만 실제로는 이 2가지가 모두 가능하며 심지어는 공식 문서에 있는 내용이다.

결론은 사진과 다르게 vue 컴포넌트에서 actions를 호출할 수도 있고, mutations를 호출할 수도 있다. 따라서 비동기 로직은 actions, 동기 로직은 actions에서 호출하면 된다.

하지만 프로젝트의 규모가 점점 커지고 로직이 복잡해지다보면 mutations, actions의 구분이 불편할 수 있고, 수개의 vue 컴포넌트에서 각자 수개의 mutations를 호출하면, 추적이 점점 어려워질 수 있다. 이 경우 vue 컴포넌트에서는 늘 actions만 호출하고 actions에 실제 로직을 담는다면 vue 컴포넌트는 상대적으로 깔끔해진다.

물론 이 방식의 단점도 존재한다. 다음과 같이 코드가 2배로 길어진다.

user.actions = {
    setName({ commit }, { name }) {
      commit('SET_NAME', name);
    },
},
user.mutations = {
    SET_NAME(state, name) {
      state.name = name;
    },
},

이를 boilerplate code(반복적으로 비슷한 형태를 띄는 코드)라고 하는데, 이 단점을 감수한다면 vue 컴포넌트에서는 actions만 호출하는 방식으로도 개발할 수 있다.

[참고]
https://github.com/vuejs/vuex/issues/587
https://blog.logrocket.com/vuex-showdown-mutations-vs-actions-f48f2f7df54b/

profile
Web FE Developer

0개의 댓글