async awaitを使いFirebaseからユーザー情報をdispatchしてから画面遷移したい

Question

前提・実現したいこと

Vue.jsで簡単な投げ銭アプリを作成しています。

Firebaseでログイン機能を実装し、ユーザー情報も管理しています。

今はsetTimeout()を使い、画面遷移する時間を遅らせてダッシュボードにユーザー名が表示されるようにしています。

ですが、setTimeout()を使わずasync awaitを使い同じような挙動をするように書き換えたいです。

該当のソースコード

↓Signup.vue（新規登録画面のコード）

<template>
  <div>
    <h1>新規登録画面</h1>
    <form>
      <ul>
        <li class="user-name">
          <label for="user-name">ユーザー名</label>
          <input type="text" id="user-name" placeholder="UserName" v-model="username" />
        </li>
        <li class="email">
          <label for="email">メールアドレス</label>
          <input type="email" id="email" placeholder="E-mail" v-model="email" />
        </li>
        <li class="password">
          <label for="password">パスワード</label>
          <input type="password" id="password" placeholder="PassWord" v-model="password" />
        </li>
      </ul>
    </form>

    <button @click="register">新規登録</button>
    <br />
    <router-link to="/">ログインはこちらから</router-link>
  </div>
</template>

<script>
import firebase from 'firebase';

export default {
  data() {
    return {
      username: '',
      email: '',
      password: ''
    };
  },
  methods: {
    register() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(result => {
          result.user.updateProfile({
            displayName: this.username
           });

           //ユーザー名をFirebaseへ格納した後、非同期処理でstoreへ渡し、ログイン後画面へ遷移する
           setTimeout(() => {
            this.$store.dispatch('updataUser', result.user)
            this.$router.push('/home');
           }, 1000)
        })
        .catch(error => {
          alert(error.message);
        });
    }
  }
};
</script>

↓Home.vue(画面遷移後のコード）

<template>
  <div>
    <div class="login-message-area">
      <div>
        <span>{{ userName }}さんようこそ！！</span>
      </div>

      <div>
        <span>残高 : 1000</span>
        <button>ログアウト</button>
      </div>
    </div>

    <h1>ユーザ一覧</h1>

    <div class="user-list-wrapper">
      <h4>ユーザ名</h4>

      <ul class="user-list">
        <li>
          <span>TEST</span>
          <form>
            <button>walletを見る</button>
            <button>送る</button>
          </form>
        </li>
        <li>
          <span>TEST</span>
          <form>
            <button>walletを見る</button>
            <button>送る</button>
          </form>
        </li>
        <li>
          <span>TEST</span>
          <form>
            <button>walletを見る</button>
            <button>送る</button>
          </form>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import firebase from 'firebase';
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      userName: ''
    };
  },
  computed: mapGetters(['getUserName']),
  // リロードしてもユーザー名が消えないようにする処理
  created () {
  firebase.auth().onAuthStateChanged((user)=> {
    if (user) {
      this.userName = user.displayName
    }
  });
},
  mounted() {
    this.userName = this.getUserName
  }
};
</script>

↓store.js

import { createStore } from 'vuex';


const store = createStore({
    state() {
        return {
            user: ''
        }
    },
    getters: {
        getUserName: state => state.user.displayName
    },
    mutations: {
        updataUser(state, userInformation) {
            state.user = userInformation;
        }
    },
    actions: {
        updataUser(context, userInfomation) {
            context.commit('updataUser', userInfomation)
        }
    }
});


export default store;

自分でコードを書いてみたりしたのですが、1日考えてみても上手くできない為、お力添えいただけると助かります????‍♂️

よろしくお願いします。

#追記

methods: {
    register() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(result => {
          result.user.updateProfile({
            displayName: this.username
           });

           //ユーザー名をFirebaseへ格納した後、非同期処理でstoreへ渡し、ログイン後画面へ遷移する
          async function setUserName() {
            await this.$store.dispatch('updataUser', result.user)
            this.$router.push('/home');
          }
          setUserName();
        })
        .catch(error => {
          alert(error.message);
        });
    }
  }

自分なりにSignUp.vueファイルのmethodsを上記のように書き直してみたのですが、

SignUp.vue?5ace:49 Uncaught (in promise) TypeError: Cannot read property '$store' of undefined

$storeが見つからないよ！というエラーが出てしまいました。
原因がわからず全く前に進めません。

Answer 1

新規登録画面のメソッド部分を以下のように書き換えたところ無事に解決しました。

async awaitとtry catchを利用してコードを書き直してみました????‍♂️

methods: {
    async register() {
      try {
        await firebase
          .auth()
          .createUserWithEmailAndPassword(this.email, this.password);
        const user = firebase.auth().currentUser;
        await user.updateProfile({
          displayName: this.username
        });
        //ユーザー名をFirebaseへ格納した後、非同期処理でstoreへ渡し、ログイン後画面へ遷移する
        this.$store.dispatch('updataUser', user);
        this.$router.push('/home');
      } catch (e) {
        alert(e.message);
      }
    }
  }