TodoInput컴포넌트의 addTodo 헬퍼함수 적용 질문드립니다.
293
작성한 질문수 10
<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까지 전달이 되긴 하는데.. 올바른 방식으로 수정한건지 궁금합니다
답변 2
0
안녕하세요, 제가 답이 좀 늦었네요 🙂 네 괜찮은 것 같아요. 템플릿 표현식에서 메서드 연결하시는 부분만 v-on:click="checkAndAddTodo"
요 형태로 해주시면 좋겠네요 :)
0
안녕하세요, 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를 헬퍼 함수로 변경할 수 있습니다. 정확한 코드 수정은 다양한 요구사항에 따라 다를 수 있으므로, 필요에 따라 추가적인 수정을 진행하시면 됩니다. 감사합니다!
Chrome 개발자 모드 확장이 안됨
0
254
1
깃 권한 요청드립니다
0
118
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
161
1
강의 깃주소 문의
0
144
1
router-view에 props를 어떻게 넘길 수 있나요?
1
279
2
Vue가 인식되지 않는 현상
0
205
1
기초강좌는 어디있나요?
1
190
2
App.vue가 필요한 이유
0
192
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
253
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
367
3
로컬 스토리지는 어디에 있나요?
1
279
1
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
1
387
2
export default 관련한 질문
0
354
2
깃허브 vue-todo 접근불가에 따른 확인요청
1
354
2
깃허브에 문제있는것 같습니다.
1
273
2
인프런 강의 재생 화면 구성 변경 문의드립니다
1
303
2
addTodo Helper 함수 적용
1
243
1
vuex 헬퍼 전역 설정
1
245
2
github 권한요청드립니다.
1
258
2
이벤트 위치에 대한 궁금증 입니다.
1
223
2
구조 차이에 대한 문의
1
345
2