码迷,mamicode.com
首页 > 其他好文 > 详细

v-module绑定vuex里面的数据

时间:2018-07-19 23:26:21      阅读:327      评论:0      收藏:0      [点我收藏+]

标签:hang   his   module   ati   模式   严格   action   绑定   mit   

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

 

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

 

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

 

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

 

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

 

v-module绑定vuex里面的数据

标签:hang   his   module   ati   模式   严格   action   绑定   mit   

原文地址:https://www.cnblogs.com/wuxianqiang/p/9338943.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!