在严格模式下使用Vuex时，v-model赋值vuex会报错

报错信息为：[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

在严格模式下使用Vuex时，在v-model属于Vuex的状态下使用可能会有些棘手：

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

假设obj是一个计算属性，该属性从商店返回一个Object，则当用户键入输入内容时，v-model此处将尝试直接进行更改obj.message。在严格模式下，这将导致错误，因为在显式Vuex变异处理程序中未执行变异。

处理它的“ Vuex方法”是绑定``的值并在input或change事件上调用方法：

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

computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}
//这是变异处理程序：

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

双向计算属性

诚然，上面的内容比v-model+局部状态要冗长得多，我们也从中失去了一些有用的功能v-model。一种替代方法是使用带有setter的双向计算属性：

<input v-model="message">

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