Vuex storeの値をコンポーネントmounted時にdataに代入する方法

Question

わからないこと

下のようなフォームにおいて、input 1のデフォルトの値をVuex storeから取得した値にしたいと思っています。
(input 2はvuex storeから取得した値)

フォームコンポーネントのmounted内で下のような実装をしているのですが、vuex storeの値がnullとなってしまっています。

mounted() {
  if (!this.user.name) this.user.name = this.name

},

• フォームコンポーネントがmountedしたタイミングで、
• vuex storeの値をフォームコンポーネントのdata内の変数にインサート

したいと思っています。

下にコード全体を載せますので、どなたかアドバイスいただけたら嬉しいです。

• フォームコンポーネント

<template>
  <div>
    input 1
    <el-input v-model="user.name"></el-input>

    input 2
    <el-input v-model="name"></el-input>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    mounted() {
      if (!this.user.name) this.user.name = this.name

    },
    computed: {
      ...mapState({
        name: state => state.user.name,
        age: state => state.user.age
      }),
    },
    data() {
      return {
        user: {
          name: '',
          age: ''
        }
      }
    }
  }
</script>

• Vues store

export const state = () => ({
  name: 'iii',
  age: 0
});

// action, mutationsなど省略

Answer 1

if (!this.user.name) の段階でthis.nameがnullなのでは？