冗長なmutationsがスプレッド構文でスッキリした件

Vue.jsとVuexを使ってマルチステップの申し込みフォームを作っています。
ユーザーが入力する情報は、性別や生年月日など8項目。

8項目それぞれに対してmutationsで処理を作っていましたが、完成したらそれはそれは冗長なコードになってしまったので、なんとかスッキリさせようと調べた結果、スプレッド構文を使ったら劇的ビフォーアフターしました。

storeとv-modelをうまく使い方ときに参考になるかと。

ビフォー(元のコードの一部抜粋)

//store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
   state: {
       user: {
           gender: '',
           year: '',
           month: '',
          //...以下略
       }
   },
   getters: {
       gender: state => state.user.gender,
       year: state => state.user.year,
       month: state => state.user.month,
       day: state => state.user.day,
       //...以下略    
   },
   mutations: {
       userGender(state, gender) {
           state.user.gender = gender;
       },
       userYear(state, year) {
           state.user.year = year;
       },
       userMonth(state, month) {
           state.user.month = month;
       },
       //...以下略
   },
}); 

//Info.vue
<template>
   <div>
       //　略　// 
   </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
   computed: {
       gender: {
           get() {
               return this.$store.getters.gender;
           },
           set(value) {
               this.$store.commit('userGender', value)
           },
       },
       year: {
           get() {
               return this.$store.getters.year;
           },
           set(value) {
               this.$store.commit('userYear', value)
           },
       },
       month: {
           get() {
               return this.$store.getters.month;
           },
           set(value) {
               this.$store.commit('userMonth', value)
           },
       },
       day: {
           get() {
               return this.$store.getters.day;
           },
           set(value) {
               this.$store.commit('userDay', value)
           },
       },
   },
   methods: {
       ...mapMutations(['userGender', 'userYear', 'userMonth', 'userDay']),
   },
};

とにかく冗長。

アフター（なんということでしょう）

//store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
   state: {
       user: {}   //①keyとvalueはcomponentのdataから持ってくるこれる
   },
   //②不要なgettersは削除する。
   mutations: {
       setUser(state, userDetail) {
           state.user = {...state.user, ...userDetail}
       }, //③スプレット構文を用いてオブジェクトを展開して結合させる。
   },
});

//Info.vue
<template>
   <div>
      // 略　//
   </div>
</template>
<script>
export default {
   data: function() {
       return {
           user: {
               gender: '',
               year: '',
               month: '',
               day: '',
           },
       }
   },
   created: function() {
       this.getDays();
   },
   methods: {
       setUser: function() {
           this.$store.commit('setUser',this.user)
       },
       getDays: function() {
           this.daysMax = new Date(this.user.year, this.user.month, 0).getDate();
       },
   },
};
</script>

ポイントはコメントアウトしている３つ
①stateを空のオブジェクトにして、代わりにコンポーネントにdataとしてオブジェクトを用意しておく。
②gettersは必ずしも必要なわけではなかった。
③スプレッド構文を用いてオブジェクトを統合することで、①を行った利点も活かせる。
といった所でした。

参考にした記事はコチラ。
JSのスプレッド構文を理解する
Vuexと入力フォーム