v-model绑定vuex中的数据,修改出错如何处理

2019-10-30  本文已影响0人  辉夜真是太可爱啦

在这里,假设messagestore中的数据,绑定值是可以拿取到store中的信息,但是修改的时候就会发生错误,因为store中的数据需要通过特殊的mutation,即commit进行提交。

<input v-model="message">

1.第一种思路,就是通过监听它的input或者change事件,在事件中进行commit提交,改变store中的值

<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
  }
}

2.第二种思路就是使用计算属性的setter

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

参考于vuex官网

上一篇 下一篇

猜你喜欢

热点阅读