vuex中的表单处理
首先简单的介绍一下vuex。
vuex的核心就是store仓库,里面管理着我们的状态, 我们在编写vue程序的时候,状态管理很重要。举个例子:比如我们都知道,加载有个加载的圈在那儿转,等到数据请求完成了,也就消失了,这个东西的写法我们就可以用到状态管理。首先状态值为0,向后端发一个请求,就状态值加1,返回一个请求就状态字减1,等到状态为0的时候,就消失这个加载圈。记住核心是状态,其它的mutation等等都是为了去合理的操作这个状态而生。
回到本文的重点,vuex的表单处理。
问题:
使用vuex严格模式的时候,在属于 Vuex 的 state 上使用 v-model
会比较棘手:
<input v-model="obj.message" />
如果这个obj是一个vuex store对象,那么这样就会出现问题。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
由于上面的规定,所以我们这里的操作相当于直接操作了。
解决:
1、通过事件来处理
<input :value="message" @input="updateMessage">
上面input的值我们绑定为message,就是通过1计算出来的,如果触发input事件,那么就会调用函数2,这样就触发了一个提交,就涉及到我们的mutations
红色框的名字和上面commit提交的名字一样,这样就触发我们的状态更新了。
2、双向绑定计算属性
上面方法1处理好了这个问题,逻辑很清楚,从状态——触发事件——提交mutations改变状态。但是这样的方法未免有点啰嗦,而且也损失了v-model的独特特性。
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
这样message改变,就会触发set函数,提交updateMessage,然后到mutations里面去改变状态,和上面就一样。初始化通过get函数读取message的值。
所有均为自己个人理解所成,一起学习进步吧~