Vuex 폼 처리

1 개요

Vuex Form Handling
Vuex 폼 처리, Vuex 폼 핸들링

strict 모드로 Vuex를 사용하는 경우 Vuex가 포함된 부분에 v-model을 사용하는 것은 약간 까다로울 수 있다.

<input v-model="obj.message">

obj가 저장소에서 객체를 반환하는 computed 속성이라면, 여기에 있는 v-model은 사용자가 입력할 때 obj.message를 직접 변경하려고 한다.
strict 모드에서는 Vuex 변이 처리기 내부에서 변이가 수행되지 않으므로 오류가 발생한다.
"Vuex 방식"은 <input>의 값을 바인딩하고 input 또는 change 이벤트에 대한 액션을 호출하는 것이다.

<input :value="message" @input="updateMessage">

// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

변이 핸들러는 다음과 같다.

// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

2 양방향 computed 속성

위와 같이 하면 v-model + 로컬 상태보다 장황해지고, v-model의 유용한 기능을 쓸 수 없게 되었다.
대안으로 setter를 사용하여 양방향 computed 속성을 사용하는 방법이 있다.

<input v-model="message">

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

3 참고