Vuex的表单处理

当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会有很多问题：
v-model=“obj.msg”
假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输入时，v-model 会试图直接修改 obj.msg。在严格模式中，由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误。

解决方案一：监听input的input/change事件

给 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 的双向绑定计算属性

<input v-model="message">

// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}

• 点赞
• 收藏
• 分享
• 文章举报