表单处理
当在严格模式中使用 Vuex 时,在属于 Vuex 的state上使用v-model
会比较棘手:
<input v-model="obj.message">
假设这里的obj是在计算属性中返回的一个属于 Vuex store的对象,在用户输入时,v-model
会试图直接修改obj.message
。在严格模式中,由于这个修改不是在mutation函数中执行的,这里会抛出一个错误。
用“Vuex 的思维”去解决这个问题的方法是:给<input>
中绑定value
,然后侦听input
或者change
事件,在事件回调中调用一个方法:
//HTML <input :value="message" @input="updateMessage ">
//JS // ... 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的双向绑定计算属性:
//HTML <input v-model="message">
//JS // ... computed: { message: {get() { return this.$store.state.obj.message },set (value) { this.$store.commit('updateMessage ', value) } } }