【Vue.js】Vuex를 사용했을 때, 폼에서 v-model을 사용하면 버그가 나오는 문제의 대처

소개

Vuex를 사용하여 상태를 관리 할 때 양식 입력에서 v-model를 사용하면,
"잠깐! 마음대로 state 바꾸지 않고 제대로 mutation 통과해 줄까 "
그리고 화난 문제가 있습니다.

자신은 이것에 대해 어떻게 하는 것이 베스트인지 모르고, 시행착오를 반복하고 있었습니다.

그럴 때, 번거로움 없이 편한 방법을 여기 블로그 로 발견했으므로, 메모해 둡니다.

환경

OS: macOS Catalina 10.15.3
Vue: 2.6.10
vuex: 3.1.2

전제

사용자 정보를 입력하는 양식이 있다고 가정합니다.

이번은 간단한 예로 하기 위해서, 그 사용자 정보중에서도 name 를 입력하는 <input> 태그를 예로 합니다.

v-model을 사용하는 경우

sample.vue

<template>
<!-- 略 -->
  <input v-model="user.name" >
<!-- 略 -->
</template>

간단하게 이것으로 OK입니다.

Vuex를 사용하여이 user 정보를 관리하는 경우
"잠깐! 마음대로 state 바꾸지 않고 제대로 mutation 통과해 줄까
그리고 화난 문제가 발생합니다.

이것을 큰 번거로움 없이 해결하는 방법은 다음과 같습니다.

개선 후

<input> 태그 내

sample.vue

<template>
<!-- 略 -->
  <input
    :value="user.name"
    @input="updateUser($event, 'name')"
  >
<!-- 略 -->
</template>

여기서 <input> 태그의 input 이벤트에서 다음 updateUser 메서드가 발화되고, 이 때 DOM 이벤트는 $event에 들어갑니다.

<input> 태그가 있는 컴포넌트의 methods

sample.vue

<script>
//略
  export default {
//略
    methods: {
      updateUser(event, key_name) {
        this.$store.commit('updateUserState', { 
      value: event.target.value, key_name });
      }
    }
  }
//略
</script>

이전 DOM 이벤트에서 입력한 문자열value을 추출하고 key-name와 함께 다음 Vuex 저장소의 mutations에 정의된 updateUserState() 인수로 전달합니다.

Vuex 스토어

store.js

export default ({
//略
  mutations: {
    updateUserState (state, { value, key_name }) {
      state.user[key_name] = value;
    }
  }
//略
})

마지막으로, 이 updateUserState() 로 스토어의 user 의 값을 변경해, 스토어내와 <input> 태그내에 입력된 캐릭터 라인이 같게 됩니다.

이상입니다!
사용하기 쉬운 코드로 매우 도움이되었습니다

결론

끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)

Vuex를 사용할 때 양식 바인딩에 v-model을 사용하면 화난 문제를 해결하는 방법 - nanisore oishisou