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