简述双向绑定和 vuex 是否冲突 ？
双向绑定和 Vuex 并不冲突，但是在 Vuex 的严格模式下，对 state 的修改只能在 mutation 中进行，这就意味着双向绑定的 v-model 不能直接用在 state 上，否则当输入框内容改变，试图直接修改 state，就会抛出错误。
不过，我们可以通过一些方式来解决这个问题：
- 使用计算属性 (computed properties)：我们可以利用计算属性的 getter 和 setter 来实现双向绑定。
<template>
<input v-model="message">
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState({
message: state => state.obj.message
}),
message: {
get() {
return this.store.state.obj.message
},
set(value) {
this.store.commit('updateMessage', value)
}
}
},
methods: {
...mapMutations({
updateMessage: 'UPDATE_MESSAGE'
})
}
}
</script>
在上述代码中，我们使用了计算属性的 getter 和 setter 来实现双向绑定。当输入框的值改变时，setter 会被调用，然后在 setter 中我们调用 mutation 来改变 state 的值。
- 使用
v-model的修饰符.lazy：这个修饰符可以让我们在input或textarea元素失去焦点时才更新数据，而不是每次输入字符时都更新。
<template>
<input v-model.lazy="message">
</template>
在上述代码中，当输入框失去焦点时，v-model.lazy 会将输入框的值赋给 message，然后再通过 mutation 更新 state 的值。