Vuex 表单处理

严格模式下的Vuex，在属于 Vuex 的 state （状态）上使用 v-model时会比较棘手：

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

假设 obj 计算的属中返回一个对象，在用户输入时，v-model会尝试直接修改obj.message。在严格模式下，因为修改不在Vuex mutation handler中执行,将会抛出一个错误。

用“Vuex思维”去处理是给<input>绑定value（值），然后帧听<input>或change事件，并在回调中调用action：

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

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

在这里使用 mutation handler(变更句柄):

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

双向计算属性

必须承认，上述比v-model+本机状态(local state)啰嗦得多，以及从v-model中弃用了一些有用的功能。使用 setter 双向计算属性的另一种方法：

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