【Vue.js】selectで選択した内容を別のページに表示したい

Question

前提・実現したいこと

生年月日をselectで選択し、選択内容をstoreのstateに保存し、それを2ページ目で表示したいです。

発生している問題・エラーメッセージ

error  Duplicated key 'year'
error  Duplicated key 'month'
error  Duplicated key 'day'

該当のソースコード

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import page1 from '../pages/page1.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'page1',
    component: page1
  },
  {
    path: '/page2',
    name: 'page2',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../pages/page2.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

src/store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    year: '',
    month: '',
    day: ''
  },
  mutations: {
    setYear (state, year) {
      state.year = year
    },
    setMonth (state, month) {
      state.month = month
    },
    setDay (state, day) {
      state.day = day
    }
  },
  actions: {
    getYear: ({commit}, year) => {
      commit('setYear', year)
    },
    getMonth: ({commit}, month) => {
      commit('setMonth', month)
    },
    getDay: ({commit}, day) => {
      commit('setDay', day)
    }
  },
  getters: {
    currentYear: state => {
      return state.year
    },
    currentMonth: state => {
      return state.month
    },
    currentDay: state => {
      return state.day
    }
  }
})

src/pages/page1.vue

<template>
  <div class="page1">
    <p>生年月日</p>
    <form><!--年号も合わせて生年月日を選択します-->
      <select v-model="year" @change="getDays">
        <option v-for="n in 100" v-bind:value="n + 1921" v-bind:key="n">{{(n + 1921) | era}}</option>
      </select>年
      <select v-model="month" @change="getDays">
        <option v-for="n in 12" v-bind:key="n">{{n}}</option>
      </select>月
      <select v-model="day" @change="getDays">
        <option v-for="n in daysMax" v-bind:key="n">{{n}}</option>
      </select>日
    </form>
    <router-link to="/page2">次へ進む</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: 2000,
      month: 1,
      day: 1,
      daysMax: ''
    }
  },
  created() {
    this.getDays()
  },
  computed: {
    year: {
      get() {
        return this.$store.getters.year
      },
      set(value) {
        this.$store.dispatch("getYear", value)
      }
    },
    month: {
      get() {
        return this.$store.getters.month
      },
      set(value) {
        this.$store.dispatch("getMonth", value)
      }
    },
    day: {
      get() {
        return this.$store.getters.day
      },
      set(value) {
        this.$store.dispatch("getDay", value)
      }
    },
  },
  methods: {
    getDays: function() {//月末の日にちを計算します。例えば、2月であれば28日(うるう年以外)。
      this.daysMax = new Date(this.year, this.month, 0).getDate();
    }
  },
  filters: {//西暦に対する和暦を計算します。
    era(y) {
      let result;
      if (y > 2018) {
        result = `${y} (令和${y-2018})`;
      } else if (y > 1988) {
        result = `${y} (平成${y-1988})`;
      } else if (y > 1925) {
        result = `${y} (昭和${y-1925})`;
      } else if (y > 1911) {
        result = `${y} (大正${y-1911})`;
      }
      return result;
    }
  }
};
</script>

src/pages/page2.vue

<template>
  <div class="page2">
      <p>生年月日</p>
      <p>{{$store.getters.currentYear}}年{{$store.getters.currentMonth}}月{{$store.getters.currentDay}}日</p>
    </div>
    <router-link to="/">前に戻る</router-link>
  </div>
</template>

<script>
export default {
  computed: {
    currentYear() {
      return this.$store.getters.currentYear
    },
    currentMonth() {
      return this.$store.getters.currentMonth
    },
    currentDay() {
      return this.$store.getters.currentDay
    }
  }
}
</script>

試したこと

エラーの原因としては、すでにdataにyear,month,dayが指定されているにも関わらず、computedにも同様に指定されているためと考えられます。year,month,dayをそれぞれひとまとめにできればエラーが解消されると推測していますが、うまくいきません。試しにdataの定数名とmethodの定数名を別の名前にしてみたところ、storeのstateから生年月日を参照でき、選択内容を2ページ目に表示できたのですが...

data() {
  return {
    dataYear: 2000,//year → dataYearに変更
    dataMonth: 1,//month → dataMonthに変更
    dataDay: 1,//day → dataDayに変更
    daysMax: ''
  }
//(中略)
methods: {
  getDays: function() {//year → dataYear, month → dataMonthにそれぞれ変更
    this.daysMax = new Date(this.dataYear, this.dataMonth, 0).getDate();
  }
}

今度はdataの初期値とv-modelとの関係がなくなってしまい、初期状態で2000(平成12)年1月1日が表示されず、月末の日にち計算がおかしくなってしまいました。(例えば、本来あり得ない2月31日が表示可能になってしまう)
selectの内容を別のページに表示しつつ、初期値の表示、月末の日にち計算する方法を教えてください。

追記1
v-modelをdateに合わせる、初期値を受け皿の変数date…に代入する
というコメントをいただきました。コメントに基づき、以下のように修正しました。

<form>
  <select v-model="date" @change="getDays"><!--dataYear → dateに変更-->
    <option v-for="n in 100" v-bind:value="n + 1921" v-bind:key="n">{{(n + 1921) | era}}</option>
  </select>年
  <select v-model="date" @change="getDays"><!--dataMonth → dateに変更-->
    <option v-for="n in 12" v-bind:key="n">{{n}}</option>
  </select>月
  <select v-model="date" @change="getDays"><!--dataDay → dateに変更-->
    <option v-for="n in daysMax" v-bind:key="n">{{n}}</option>
  </select>日
</form>

data() {
  return {
    date: moment("2000-01-01").toDate(),//dataYear,dataMonth,dataDayから変更
    daysMax: ''
  }
//(中略)
methods: {
  getDays: function() {//合わせてdataYear → date.getFullYear(), dataMonth → date.getMonth()にそれぞれ変更
    new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDate();
  }
}

しかし、初期値の表示、月末の日にち計算はできませんでした。エラー内容は以下の通りです。

v-on handler: "TypeError: this.date.getFullYear is not a function"

getFullYearとgetMonthを使用するにあたり、moment("2000-01-01").toDate()でdateをdateObjに合わせたので、問題ないように思うのですが...

補足情報（FW/ツールのバージョンなど）

Vue version: 2.6.14
Vue-CLI version: 4.5.14

Comments

[FKM]

v-modelの方をdate…に合わせてもだめですか？
他の方法としては初期値を受け皿の変数date…に代入するとか？

[退会済みユーザー]

コメントありがとうございます。
コメントに基づき修正してみましたが、追記1にあるようにエラーが出てしまい、dateをうまく活用できていません。
お手数ですが、ご意見いただけると幸いです。
初学者ゆえ、そもそも追記・修正依頼の意図を誤って理解しているかもしれませんので、その場合もご指摘お願いします。

[FKM]

オブジェクトの内部のプロパティに入れるのではなく、移し替えるだけです。変数の流れを追ってみてください。たとえば

dateYear = this.year
このように代入していくわけです。

[退会済みユーザー]

早速のコメントありがとうございます。フォローさせていただきました。
大変申し訳ありませんが、私の理解力が乏しく具体的にどこをどのように修正するのかわかりませんでした。
このままですと、やりとりや質問の追記が長くなってしまいますので、修正する場所とコード内容を明記していただけると幸いです。以下に例を挙げます。(Markdown記法ができないので見づらいですが)

例)
<select v-model="year" @change="getDays"><!--year → dateYearに変更-->
(中略)
data() {
return {
year: 2000, //dateYear: this.yearに変更
}
}

ご面倒をおかけして大変申し訳ありませんが、例に沿ってご指摘いただけると理解できると思いますので、よろしくお願いします。

Answer 1

FKMさんのご意見が役に立ちました。ありがとうございます。
解決方法ですが、methodsのgetDaysの中に

this.year = this.dateYear;
this.month = this.dateMonth;
this.day = this.dateDay;

を追加することで、月末の日にち計算をさせつつ、2ページ目に生年月日を表示することができました。

修正したpage1.vueのコード全文を以下に記載します。それ以外のファイルは修正なしです。
src/pages/page1.vue

<template>
  <div class="page1">
    <p>生年月日</p>
    <form>
      <select v-model="dateYear" @change="getDays">
        <option v-for="n in 100" v-bind:value="n + 1921" v-bind:key="n">{{(n + 1921) | era}}</option>
      </select>年
      <select v-model="dateMonth" @change="getDays">
        <option v-for="n in 12" v-bind:key="n">{{n}}</option>
      </select>月
      <select v-model="dateDay" @change="getDays">
        <option v-for="n in daysMax" v-bind:key="n">{{n}}</option>
      </select>日
    </form>
    <router-link to="/page2">次へ進む</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateYear: 2000,
      dateMonth: 1,
      dateDay: 1,
      daysMax: ''
    }
  },
  created() {
    this.getDays()
  },
  computed: {
    year: {
      get() {
        return this.$store.getters.year
      },
      set(value) {
        this.$store.dispatch("getYear", value)
      }
    },
    month: {
      get() {
        return this.$store.getters.month
      },
      set(value) {
        this.$store.dispatch("getMonth", value)
      }
    },
    day: {
      get() {
        return this.$store.getters.day
      },
      set(value) {
        this.$store.dispatch("getDay", value)
      }
    },
  },
  methods: {
    getDays: function() {
      this.year = this.dateYear;//追加修正箇所です。
      this.month = this.dateMonth;//追加修正箇所です。
      this.day = this.dateDay;//追加修正箇所です。
      this.daysMax = new Date(this.year, this.month, 0).getDate();
    }
  },
  filters: {
    era(y) {
      let result;
      if (y > 2018) {
        result = `${y} (令和${y-2018})`;
      } else if (y > 1988) {
        result = `${y} (平成${y-1988})`;
      } else if (y > 1925) {
        result = `${y} (昭和${y-1925})`;
      } else if (y > 1911) {
        result = `${y} (大正${y-1911})`;
      }
      return result;
    }
  }
};
</script>