Vuex Two Way Data Binding

I was having trouble understanding the work-flow and boilerplate of using Vuex state in my components. This article by Markus Oberlehner helped me understand how to bind elements to the state and how to use vuex-map-fields to simplify the process. Here’s the manual way.

//store
export default new Vuex.Store({
  strict: true,
  state: {
    form: { message: '' },
  },
});

//component
<template>
  <input v-model="firstName">
  <input v-model="lastName">
  <input v-model="message">
  <!-- ... -->
</template>

<script>
export default {
  computed: {
    firstName: {
      get() {
        return this.$store.state.form.firstName;
      },
      set(value) {
        this.$store.commit('updateFirstName', value);
      },
    },
    lastName: {
      get() {
        return this.$store.state.form.lastName;
      },
      set(value) {
        this.$store.commit('updateLastName', value);
      },
    },
    message: {
      get() {
        return this.$store.state.form.message;
      },
      set(value) {
        this.$store.commit('updateMessage', value);
      },
    },
    // ...
  },
};
</script>

Read his post to find out about vuex-map-fields https://markus.oberlehner.net/blog/form-fields-two-way-data-binding-and-vuex/