在strict mode使用 Vuex 时,在属于 Vuex 的 state 上使用 v-model 会有问题:
<input v-model="obj.message">
假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象,在用户输入时,v-model 会试图直接修改 obj.message。在strict mode中,由于这个修改不是在 mutation 中执行的, 会报错。
用Vuex 的思维去解决这个问题的方法是:给<input>
中绑定 value,然后侦听 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
}
}
另一个方法是使用带有 setter 的双向绑定computed属性:
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
<<: Day34:HTML(31) HTML响应式网页设计(1)
前言 本系列文章的开头,我们要先来了解一下物联网 (Internet of Things, IoT)...
昨天了解了 Composite 是什麽後,一如我们本来的安排,今天要来介绍的是 Composites...
让我们谈谈如何制作成功的商业传单进行促销。宣传传单的主要目的是吸引注意力。无论您是要开设商店还是想吸...
前面两天从 TCP 在做什麽开始聊起,今天来看看另外一个也很重要的协定 UDP。 UDP 为 Use...
今日文章目录 前言 参考文章 前言 昨天只有讲到一点点function component,这是我...