vuex和双向数据绑定冲突问题

前言

在vuex中我们使用v-model来修改vuex.state中的数据,没有经过mutation函数.在严格模式中会抛出错误

解决

第一种方法是将v-model拆分成:value+@input,并且要在mutation中定义input的函数,比较麻烦

<input v-model="obj.message">
//拆分为
<input :value="message" @input="updateMessage">
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
  }
}

第二种方法使用get和set,set函数内部去调用mutation

<input v-model="message">
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}