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

При использовании 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)
    }
  }
}