Vue，Firebase 画面にユーザー名表示

Question

Firebaseからユーザー名を取得し表示したい

Firebase、Vueを利用しユーザー登録し、ログインした際にユーザー名を表示させたいです

マイページ画面で色々試しているのだが、表示方法がわからない

該当のソースコード

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


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {
      name: '',
      email: '',
      password: ''
    }
  },
  mutations: {
    setUser: function (user, payload) {
      user.email = payload.email
      user.password = payload.password
      user.name = payload.name

    }
  },
  actions: {
    signUp: function (context, payload) {
      firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
        .then(() => {
          firebase.auth().currentUser.updateProfile({
            displayName: payload.name,
          },
          )
            .then(() => {
              context.commit('setUser', payload)
            })
        })
        .catch(
        )
    }
  },
  modules: {
  }
})

<template>
  <div class="form">
    
    <img alt="Vue logo" src="../assets/logo.png">

    <h1>新規登録画面</h1>
    <table>
      <tr>
        <td>ユーザー名</td>
        <td><input type="text" placeholder="userName" v-model='name'></td>
      </tr>
      <tr>
        <td>メールアドレス</td>
        <td><input type="text" placeholder="E-mail" v-model='email'></td>
      </tr>
      <tr>
        <td>パスワード</td>
        <td><input type="text" placeholder="Password" v-model='password'></td>
      </tr>  
    </table>

    <button @click="signUp" class="link-signup">新規登録</button>
    <router-link class="link-signin" to="/signin">ログインはこちらから</router-link>

  

  </div>
</template>


<script>

export default{
  name:'Signup',
  data(){
    return{
      name:'',
      email:'',
      password:''
    }
  },
  methods:{
    signUp(){
     this.$store.dispatch('signUp',{
       name:this.name,
       email:this.email,
       password:this.password
     })
     this.$router.push('/signin')
    }
  }
}

</script>

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
       <button @click="signOut">ログアウト</button>

    <p>{{''}}さんようこそ！</p>
    <h1>ユーザ一覧</h1>

  </div>
</template>


<script>

import firebase from 'firebase'

export default {
  name: 'Home',
  data () {
    return {   
    }
  },
  methods:{
    sign(){
  firebase.auth().onAuthStateChanged(user => {
  if (user) {
   user.displayName
  } else {
    console.log('ログインしてください')
  }
})
    },
    signOut() {
      firebase.auth().signOut().then(() => {
        this.$router.push('/signin')
      })
    }
  }
  
}
</script>

試したこと

Home.vueの
{{' '}}さんようこそ！
の所にユーザー名を反映させるにはどのように記述すればいいのでしょうか。
よろしくお願いいたします。

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

ここにより詳細な情報を記載してください。

Answer 1

stateで管理しているのであれば、stateの値を取得すればいけるのではないでしょうか。
※下記のコードは、stateの値を直接取得しているので、本来はgettersを定義してそこから取得したほうがよろしいかと思いますが。。。

<p>{{name}}さんようこそ！</p>

~~~

computed: {
  name() {
    return this.$store.state.user.name;
  }
},

Comments

[yukiman]

回答ありがとうございます。
computed:{
name(){
return this.$store.state.user.name;
}
},
で記入しても　{{name}}が反映されず、空白になってしますのはどのような原因があるのでしょうか。
もしよろしければ回答いただけると幸いです。