TodoInput컴포넌트의 addTodo 헬퍼함수 적용 질문드립니... - 인프런

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

[리팩토링] getters와 mapGetters 적용하기

TodoInput컴포넌트의 addTodo 헬퍼함수 적용 질문드립니다.

작성

232

수정됨

<template>
  <div class="inputBox shadow">
    <input type="text" v-model="inputValue" v-on:keyup.enter="checkAndAddTodo()">
    <span class="addContainer" v-on:click="checkAndAddTodo()">
...
</template>

<script>
  methods: {
    ...mapMutations([
      'addTodo'
    ]),

    checkAndAddTodo() {
      if (!this.checkEmpty()) {
        this.addTodo(this.inputValue);
        this.clearInput();
      } else {
        this.showModal = !this.showModal;
      }
    },
    checkEmpty() {
      console.log("inputValue: ", this.inputValue)
      if(this.inputValue === '') {
        return true;
      }
      return false;
    },
    clearInput() {
      this.inputValue = '';
    }
  },
  components: {
    Modal: Modal
  }
</script>

addTodo도 helper 함수를 적용해서 변경해보려 했는데..
이런식으로 변경하는게 맞을까요??

checkAndAddTodo함수 내의 this.addTodo() 실행시 mapMutations의 'addTodo'를 따라 store까지 전달이 되긴 하는데.. 올바른 방식으로 수정한건지 궁금합니다

javascript vue.js es6 vuex

답변 2

장기효(캡틴판교)

지식공유자

안녕하세요, 제가 답이 좀 늦었네요 🙂 네 괜찮은 것 같아요. 템플릿 표현식에서 메서드 연결하시는 부분만 v-on:click="checkAndAddTodo"

요 형태로 해주시면 좋겠네요 :)

인프런 AI 인턴

안녕하세요, dev_climber 님. addTodo 함수를 helper 함수로 변경하려는 질문을 주셨네요.

제시해주신 코드에서 addTodo 함수는 Vuex의 mapMutations를 사용하여 뮤테이션을 실행하고 있습니다. 이 경우, Vuex에서 state를 변경하는 동작을 수행하게 됩니다.

addTodo 함수를 helper 함수로 변경하기 위해서는 Vuex의 mapMutations 대신 mapActions를 사용해야 합니다. mapActions는 액션을 컴포넌트에서 실행할 수 있도록 매핑해주는 도우미 함수입니다.

아래는 addTodo를 helper 함수로 변경한 예시입니다.

<template>
  <!-- 생략 -->
</template>

<script>
  methods: {
    ...mapActions([
      'addTodo'
    ]),

    checkAndAddTodo() {
      if (!this.checkEmpty()) {
        this.addTodoHelper(this.inputValue);
        this.clearInput();
      } else {
        this.showModal = !this.showModal;
      }
    },
    addTodoHelper(todo) {
      this.addTodo(todo);
    },
    checkEmpty() {
      // 생략
    },
    clearInput() {
      // 생략
    }
  },
  // 생략
</script>

위 코드에서 addTodo 함수를 addTodoHelper로 변경하여 Vuex의 액션을 실행하고 있습니다. 실제 동작은 기존과 동일하게 이루어지며, 액션 내에서 상태를 변경하게 됩니다.

이를 통해 addTodo를 헬퍼 함수로 변경할 수 있습니다. 정확한 코드 수정은 다양한 요구사항에 따라 다를 수 있으므로, 필요에 따라 추가적인 수정을 진행하시면 됩니다. 감사합니다!

인프런 커뮤니티 질문&답변

TodoInput컴포넌트의 addTodo 헬퍼함수 적용 질문드립니다.