vuex中的表单处理

首先简单的介绍一下vuex。

vuex的核心就是store仓库，里面管理着我们的状态， 我们在编写vue程序的时候，状态管理很重要。举个例子：比如我们都知道，加载有个加载的圈在那儿转，等到数据请求完成了，也就消失了，这个东西的写法我们就可以用到状态管理。首先状态值为0，向后端发一个请求，就状态值加1，返回一个请求就状态字减1，等到状态为0的时候，就消失这个加载圈。记住核心是状态，其它的mutation等等都是为了去合理的操作这个状态而生。

回到本文的重点，vuex的表单处理。

问题：

使用vuex严格模式的时候，在属于 Vuex 的 state 上使用 v-model 会比较棘手：

如果这个obj是一个vuex store对象，那么这样就会出现问题。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

 由于上面的规定，所以我们这里的操作相当于直接操作了。

解决：

1、通过事件来处理

上面input的值我们绑定为message，就是通过1计算出来的，如果触发input事件，那么就会调用函数2，这样就触发了一个提交，就涉及到我们的mutations

红色框的名字和上面commit提交的名字一样，这样就触发我们的状态更新了。

2、双向绑定计算属性

上面方法1处理好了这个问题，逻辑很清楚，从状态——触发事件——提交mutations改变状态。但是这样的方法未免有点啰嗦，而且也损失了v-model的独特特性。

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

这样message改变，就会触发set函数，提交updateMessage，然后到mutations里面去改变状态，和上面就一样。初始化通过get函数读取message的值。

所有均为自己个人理解所成，一起学习进步吧~

参考文章：https://vuex.vuejs.org/zh/guide/forms.html