【Nuxt.js】middlewareでstoreにセットした値をmountedでdataにセットできない

Question

Nuxt.jsでアプリ開発をしております。

middlewareでFirebaseからユーザーデータを取得しstoreに保存しております。
その値をmountedでdata内の変数に格納したいのですが、なぜか格納されません。

middlewareでfirebaseからデータを取得し終わる前にmountedが実行されてしまっているせいだと思うのですが、こういう場合どのように対処したら良いのでしょうか？

// middleware/authenticated.js

import { db, auth } from '~/plugins/firebase'

export default function({ route, store, redirect }) {
  auth.onAuthStateChanged((user) => {
    if (user) {
      db.collection('users')
        .doc(user.uid)
        .get()
        .then((doc) => {
          if (doc.exists) {
            store.commit('setUser', doc.data()) // ★ここでユーザーデータをstoreに保存しています
          } else {
            // 新規ユーザーの登録処理
          }
        })
    }
  })
}

// store/index.js

export const state = () => ({
  user: {}
})

export const mutations = {
  setUser(state, user) {
    state.user = user
  }
}

// pages/mypage.vue

<template>
  <div>
    {{ onamae }}<br />    <!-- ★ここで表示できません！ -->
    {{ birth }}<br />
    {{ profile }}
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  layout: 'mypage',

  data() {
    return {
      onamae: '',
      birth: null,
      profile: '',
  },

  computed: {
    ...mapGetters(['user']),
  },

  mounted() {
    // ユーザーデータをセット
    this.onamae = this.user.onamae
    this.birth = this.user.birth
    this.profile = this.user.profile
  }
}
</script>

Answer 1

mounted内で値をセットするのではなく、storeの変更を検知してからコンポーネントのdataを変更するような方法だとどうでしょうか？

https://www.google.co.jp/amp/s/kawadev.net/vuex-watch/amp/

Comments

[Khy]

storeもwatchできるとは知りませんでした！
お陰様でずっと悩んでいたところが解決できました。
ありがとうございました！！