Vuex之表单处理

表单的v-model属性值是Vuex的state时，如果时严格模式，因为用户输入时，v-model会试图修改v-model的值，由于修改并非mutation执行的,严格模式下会抛出错误。参考这里
针对这种情况，有两个处理方法:一个是双向绑定的计算属性，一个是给表单绑定value，然后侦听input或change事件，在事件中调用action。

第一个方法：保留v-model，双向绑定

message'>

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

这样做的好处是：利用了v-model很有用的特性。

第二个方法：比较麻烦。

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
 }
}