表单处理

在 scrimba 上尝试这节课

当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会比较棘手：

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

假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输入时，v-model 会试图直接修改 obj.message。在严格模式中，由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误。

用“Vuex 的思维”去解决这个问题的方法是：给 <input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用一个方法:

  1. <input :value="message" @input="updateMessage">
  1. // ...
  2. computed: {
  3.   ...mapState({
  4.     message: state => state.obj.message
  5.   })
  6. },
  7. methods: {
  8.   updateMessage (e) {
  9.     this.$store.commit('updateMessage', e.target.value)
  10.   }
  11. }

下面是 mutation 函数：

  1. // ...
  2. mutations: {
  3.   updateMessage (state, message) {
  4.     state.obj.message = message
  5.   }
  6. }

双向绑定的计算属性

必须承认，这样做比简单地使用“v-model + 局部状态”要啰嗦得多，并且也损失了一些 v-model 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性：

  1. <input v-model="message">
  1. // ...
  2. computed: {
  3.   message: {
  4.     get () {
  5.       return this.$store.state.obj.message
  6.     },
  7.     set (value) {
  8.       this.$store.commit('updateMessage', value)
  9.     }
  10.   }
  11. }