What is sane way in vuejs + vuex form handling?

Question

I have a large forms to submit in single page.

<container>
  <formA>
  <formB>
  <formC>
  <submitButton>
<container>

it looks apparently like this. and I have a store which save every form data. then when user click submit button, I gather all form data using vuex store.

The problem is I need to update the form data in store everytime.

so I'll be like this in vue component

 watch: {
   userInput (val) {
     this.updateState(val)
 }

update state when input changes by watching form data(binded with v-model).

or like this which is documented in vuex doc.

  userInput: {
    get () {
      return this.$store.state.userInput
    },
    set (val) {
      this.updateState(val)
    }
  }

well.. I don't think these are good idea. Is there any better way to form handling with vuex?

Answer 1

I made a little tool which makes form handling wit Vuex a lot easier: vuex-map-fields

Example

Store

import Vue from 'vue';
import Vuex from 'vuex';

// Import the `getField` getter and the `updateField`
// mutation function from the `vuex-map-fields` module.
import { getField, updateField } from 'vuex-map-fields';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    fieldA: '',
    fieldB: '',
  },
  getters: {
    // Add the `getField` getter to the
    // `getters` of your Vuex store instance.
    getField,
  },
  mutations: {
    // Add the `updateField` mutation to the
    // `mutations` of your Vuex store instance.
    updateField,
  },
});

Component

<template>
  <div id="app">
    <input v-model="fieldA">
    <input v-model="fieldB">
  </div>
</template>

<script>
import { mapFields } from 'vuex-map-fields';

export default {
  computed: {
    // The `mapFields` function takes an array of
    // field names and generates corresponding
    // computed properties with getter and setter
    // functions for accessing the Vuex store.
    ...mapFields([
      'fieldA',
      'fieldB',
    ]),
  },
};
</script>

You can read more about vuex-map-fields on my blog: How to Handle Multi-row Forms with Vue, Vuex and vuex-map-fields