개요
- 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
}
}
양방향 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)
}
}
}