인프런 커뮤니티 질문&답변
작성한 질문수
addTodo Helper 함수 적용
작성
·
138
1
안녕하세요.
강의 중에는 TodoInput.vue addTodo()를 ...mapMutation로 변경하는 내용이 없습니다. git 에도 $store.commit이 적용된 소스만 있고요.
addTodo()는 helper로 대체할 수 없는 건가요?
감사합니다.
답변 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나 가이드가 있다면 부탁드립니다.
감사합니다.
안녕하세요, 먼저 살펴보셨군요. 맵 뮤테이션은 안쓰시는 걸 추천드립니다. 이후에 타입스크립트를 적용한다고 했을 때 실용적이지가 않아서요. 별도로 구분해서 쓰시면 좋을 것 같아요 :)
그리고 컴포넌트의 로직은 뷰엑스에 들어갈 필요가 없다면 컴포넌트에 남아 있는게 제일 좋습니다 :)