Vuex Helper를 이용하여 리팩토링을 진행해보자.

this.$store.~~ 방식으로 하나하나 접근했던 코드들이 ...map~~으로 묶이면서 좀 더 깔끔한 코드가 완성된다.

TodoList.vue

<template>
  <section>
    <transition-group name="list" tag="ul">
      <li v-for="(todoItem, index) in this.storedTodoItems" class="shadow" v-bind:key="todoItem.item">
        <i class="checkBtn fas fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete({todoItem, index})"></i>
        <span v-bind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span>
        <span class="removeBtn" v-on:click="removeTodo({todoItem, index})">
          <i class="removeBtn fas fa-trash-alt"></i>
        </span>
      </li>
    </transition-group>
  </section>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations({
      removeTodo: 'removeOneItem',
      toggleComplete: 'toggleOneItem'
    });
  },
  computed: {
    ...mapGetters({
      storedTodoItems: 'getTodoItems'
    });
  }
}
</script>

TodoFooter.vue

<template>
  <div class="clearAllContainer">
    <span class="clearAllBtn" v-on:click="clearTodo">Clear All</span>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations({
      clearTodo: 'clearAllItems'
    });
  }
}
</script>

확실히 이전 코드와 비교해 보면 훨씬 깔끔해진것을 알 수 있다.

removeTodo(todoItem, index) {
  this.$store.commit('removeOneItem', {todoItem, index});
},
toggleComplete(todoItem, index) {
  this.$store.commit('toggleOneItem', {todoItem, index});
}

↓

...mapMutations({
  removeTodo: 'removeOneItem',
  toggleComplete: 'toggleOneItem'
});

단, mapMutations로 변경하면서 별도로 인자(payload)를 작성하는 곳이 없고 v-디렉티브에서 바로 값을 전달하기 때문에, 객체 형태로 지정해야 한다.

v-on:click="removeTodo({todoItem, index})"

helper함수를 배우면서 사내 프로젝트를 진행하며 작성한 나의 코드와 비교해보니 코드수의 차이가 어마어마했다.

프로젝트를 리팩토링할 생각을하니 가슴이 두근거린다. 얼른 변경했음 좋겠다.
하지만 아직 이르다.
store.js도 mudules를 이용하면 훨씬 깔끔하고 정돈된 코드로 변경할 수 있다.

다음 포스팅에서...

출처 인프런 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex