Vuex中的表单处理

在严格模式下使用vuex时候，若想要在vuex store的对象是上使用v-model实现双向数据绑定，v-model会试图直接修改store内的值，由于这个修改不是在mutation函数中执行，因此会抛出错误。

解决方案

1.给中绑定value，然后侦听input或者change事件，在事件回调函数中调用一个方法

//输入框的value绑定state内的message属性
//侦听input事件，触发updateMessage函数
<input :value="message" @input="updateMessage">

// ...
computed: {
  ...mapState({
  //obj 是在计算属性中返回的一个属于 Vuex store 的对象
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
  //提交mutation，并将输入框的value值作为载荷一起提交
    this.$store.commit('updateMessage', e.target.value)
  }
}

// ...mutation函数内容
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

2.使用setter的双向绑定计算属性

<input v-model="message">

// ...
computed: {
  message: {
      //获取属性的时候会执行
    get () {
      return this.$store.state.obj.message
    },
      //设置属性值的时候会执行
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}