表单的v-model
属性值是Vuex的state时,如果时严格模式,因为用户输入时,v-model会试图修改v-model的值,由于修改并非mutation执行的,严格模式下会抛出错误。参考这里
针对这种情况,有两个处理方法:一个是双向绑定的计算属性,一个是给表单绑定value,然后侦听input
或change
事件,在事件中调用action。
第一个方法:保留v-model,双向绑定
<input v-model="message'>
computed:{
message:{
get(){
return this.$store.obj.message
},
set(value){
this.$store.commit('updateMessage',value)
}
}
}
这样做的好处是:利用了v-model很有用的特性。
第二个方法:比较麻烦。
<input :value="message" @input="updateMessage">
computed:{
...mapState({
message: state => state.obj.message
})
},
methods:{
updateMessage(e){
this.$store.commit('updateMessage',e.target.value)
}
}
下面是mutation函数
mutations:{
updateMessage(state,message){
state.obj.message=message
}
}