Form Handling

When using Vuex in strict mode, it could be a bit tricky to use on a piece of state that belongs to Vuex:

The “Vuex way” to deal with it is binding the <input>‘s value and call a method on the input or change event:

<input :value="message" @input="updateMessage">

// ...
  updateMessage (state, message) {
  }
}

Admittedly, the above is quite a bit more verbose than v-model + local state, and we lose some of the useful features from v-model as well. An alternative approach is using a two-way computed property with a setter:

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