addTodo Helper 함수 적용
242
9 asked
안녕하세요.
강의 중에는 TodoInput.vue addTodo()를 ...mapMutation로 변경하는 내용이 없습니다. git 에도 $store.commit이 적용된 소스만 있고요.
addTodo()는 helper로 대체할 수 없는 건가요?
감사합니다.
Answer 1
1
methods: {
...mapMutations(['addOneItem']),
addTodo() {
if(this.newTodoItem !== ''){
// this.$emit('addTodoItem', this.newTodoItem)
// this.$store.commit('addOneItem', this.newTodoItem);
this.addOneItem(this.newTodoItem)
this.clearInput();
} else {
this.showModal = !this.showModal;
}
},
clearInput() {
this.newTodoItem = "";
}
},
이렇게 수정해서 적용해보긴 했습니다만...
왠지 'mapMutations에 addTodo() 로직이 넘어가야 할 것만 같은 느낌이 드는데요. 그렇게 하려면 newTodoItem, showModal 모두 state에서 관리해야 하는 건지요?
그리고 mutation에 있어야 하는 로직과 각 component에 있어야 하는 로직을 구분해야 하는지, 아니면 되도록 mutation에 로직을 구현하도록 하는 것이 vuex를 적용해 개발할 때 더 적절한 개발 패턴인지 아직 감이 안 옵니다.
best practice나 가이드가 있다면 부탁드립니다.
감사합니다.
0
안녕하세요, 먼저 살펴보셨군요. 맵 뮤테이션은 안쓰시는 걸 추천드립니다. 이후에 타입스크립트를 적용한다고 했을 때 실용적이지가 않아서요. 별도로 구분해서 쓰시면 좋을 것 같아요 :)
그리고 컴포넌트의 로직은 뷰엑스에 들어갈 필요가 없다면 컴포넌트에 남아 있는게 제일 좋습니다 :)
Chrome 개발자 모드 확장이 안됨
0
251
1
깃 권한 요청드립니다
0
117
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
161
1
강의 깃주소 문의
0
142
1
router-view에 props를 어떻게 넘길 수 있나요?
1
277
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
302
2
vuex 헬퍼 전역 설정
1
244
2
github 권한요청드립니다.
1
255
2
이벤트 위치에 대한 궁금증 입니다.
1
219
2
구조 차이에 대한 문의
1
341
2
TodoList.vue에서 삭제 처리를 위한 emit이 작동하지 않습니다.
1
563
2