双向绑定和 vuex 是否冲突
首页 > Vue    作者:sunflower   2019年4月16日 8:34 星期二   热度:1903°   百度已收录  
时间:2019-4-16 8:34   热度:1903° 

当在严格模式中使用 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-model + 局部状态”要啰嗦得多,并且也损失了一些 v-model 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性:

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

作者:木易杨说
链接:https://juejin.im/post/5cb3376bf265da039c0543da
来源:掘金
二维码加载中...
本文作者:sunflower      文章标题: 双向绑定和 vuex 是否冲突
本文地址:?post=328
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: sunflower