Vuex

表单处理

在 Scrimba 上尝试本课

在严格模式下使用 Vuex 时，在属于 Vuex 的状态上使用 v-model 可能有点棘手

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

假设 obj 是一个计算属性，它从存储中返回一个对象，这里的 v-model 将尝试在用户在输入框中键入时直接修改 obj.message。在严格模式下，这将导致错误，因为修改没有在显式的 Vuex mutation 处理程序中执行。

处理它的“Vuex 方式”是绑定 <input> 的值，并在 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)
    }
  }
}