Обработка форм

При использовании Vuex в строгом режиме может быть немного сложно использовать v-model для части состояния, принадлежащей Vuex:

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

Предполагая, что obj — это вычисляемое свойство, которое возвращает объект из хранилища, то v-model здесь попытается напрямую изменить obj.message, когда пользователь вводит данные в поле ввода. В строгом режиме это приведёт к ошибке, потому что мутация не выполняется внутри явного обработчика мутаций Vuex.

«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)
  }
}

И вот обработчик мутаций:

// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

Двунаправленное вычисляемое свойство

Надо признать, что вышеприведённый вариант значительно громоздче, чем v-model + локальное состояние, и мы теряем некоторые полезные функции из v-model. Альтернативный подход — использовать двунаправленное вычисляемое свойство с установщиком:

<input v-model="message">

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