inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

[리팩토링 & 퀴즈] mapMutations 퀴즈 풀이

TodoInput.vue 에서 mapMutations 사용하기 질문

501

hongmo kang

작성한 질문수 2

1

 methods: {
   // ...mapMutations({addTodo:"addOneItem"}),
    addTodo() {
      if (this.newTodoItem !== "") {
        // this.$emit("addTodoItem", this.newTodoItem);
        this.$store.commit("addOneItem", this.newTodoItem);
        this.clearInput();
        this.$refs.fc.focus();
      } else {
        this.showModal = !this.showModal;
      }
    },
    clearInput() {
      this.newTodoItem = "";
    },
  },
  components: { Modal },
};

에서 "...mapMutations({addTodo:"addOneItem"})"
 로 스토어로 접근 할때 

<input
      type="text"
      v-model="newTodoItem"
      v-on:keyup.enter="addTodo"
      ref="fc"
    />

v-on:keyup.enter="addTodo(?)"에 인자값을 넘기는 부분이 없는데
...mapMutations({addTodo:"addOneItem"}), 이렇게 하면 파마미터 값을 어떻게 넘기나요?

그리고 기존에는 "this.$store.commit("addOneItem", this.newTodoItem);" 
이소스 호출 전 if문이 로직이 있고 호출 후에는 this.clearInput();
로직이 있는데 이건 mapMutations로 호출 할때 어떻게 처리를 하면 되나요?

vuex es6 vuejs javascript

답변 1

0

캡틴판교

안녕하세요, 아래 처럼 하시면 인자 값이 암묵적으로 넘어갈 거예요.

v-on:keyup.enter="addTodo"

...mapMutations({addTodo:"addOneItem"})

 

요렇게 해보시고 mapMutations 없이 풀어서 쓰셔야 할 것 같습니다! :)

Chrome 개발자 모드 확장이 안됨

0

318

1

깃 권한 요청드립니다

0

130

1

vue.js 중급 리포지토리 권한 관련

0

131

1

vuex + axios 질문 있습니다!

1

211

2

깃 권한 요청드립니다!

0

170

1

강의 깃주소 문의

0

153

1

router-view에 props를 어떻게 넘길 수 있나요?

1

293

2

Vue가 인식되지 않는 현상

0

214

1

기초강좌는 어디있나요?

1

202

2

App.vue가 필요한 이유

0

202

1

getter가 정의되어 있지 않아 오류가 발생합니다.

1

266

1

뷰 라이프사이클

1

198

1

TSLint 말고 TSLint Vue 설치해도 되나요?

1

381

3

로컬 스토리지는 어디에 있나요?

1

291

1

vuex 실행시 새로고침해야지만 리스트에 나타나는 현상

1

405

2

export default 관련한 질문

0

369

2

깃허브 vue-todo 접근불가에 따른 확인요청

1

364

2

깃허브에 문제있는것 같습니다.

1

286

2

인프런 강의 재생 화면 구성 변경 문의드립니다

1

314

2

addTodo Helper 함수 적용

1

255

1

vuex 헬퍼 전역 설정

1

255

2

github 권한요청드립니다.

1

265

2

이벤트 위치에 대한 궁금증 입니다.

1

234

2

구조 차이에 대한 문의

1

353

2