表单处理

本节目标：理解“表单处理”的核心思路，并能把它用于实际开发或面试表达。 当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会比较棘手：

<input v-model="obj.message">

假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输入时，v-model 会试图直接修改 obj.message。在严格模式中，由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误。

用“Vuex 的思维”去解决这个问题的方法是：给 \<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) } } //下面是 mutation 函数： // ... mutations: { updateMessage(state, message) { state.obj.message = message } }

双向绑定的计算属性 必须承认，这样做比简单地使用“v-model + 局部状态”要啰嗦得多，并且也损失了一些 v-model 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性：

<input v-model="message">
// ...computed: {  message: {    get () {      return this.$store.state.obj.message    },    set (value) {      this.$store.commit('updateMessage', value)    }  }}

> 来自

 <https://vuex.vuejs.org/zh/guide/forms.html>