表单处理

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

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

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

//HTML 

//JS
// ...
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
  }
}

必须承认，这样做比简单地使用“v-model+局部状态”要啰嗦得多，并且也损失了一些v-model中很有用的特性。

双向绑定的计算属性

另一个方法是使用带有setter的双向绑定计算属性：

//HTML 

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com