nuxtでうまくstoreの情報をasyncData経由で渡せない

Question

index.vue

data: function () {
    return {
      isLogin: ''
    }
  },
  async asyncData ({store}) {
    console.log("asyncdataテスト")
    console.log(store.state.isLogin)
    return { isLogin:store.state.isLogin }
  }

store/index.js

import Vuex from 'vuex'

const store = () => {
  return new Vuex.Store({
    state: {
      uid: '',
      name: '',
      isLogin: ''
    },
    mutations: {
      login (state, user) {
        state.uid = user.uid
        state.name = user.displayName
        state.isLogin = user.isLogin
        console.log('login完了')
        console.log(state.isLogin)
      },
      logout (state) {
        state.user = null
        console.log('logout完了')
        console.log(state.isLogin)
      }
    }
  })
}
export default store

上記のコードで下記のことをしたいと考えています。

• storeからisLogin（ログイン情報）を取得
• asyncdata経由でdataのisLoginに格納
• isLoginを使ってviewのレンダリングを出し分けたい

ただ実際には

console.log("asyncdataテスト")
console.log(store.state.isLogin)

store.state.isLoginがnullになっています。store自体は渡ってきています。

contextの使い方がうまくいってなくstoreの情報を取得できていないと思うのですが良い書き方ないでしょうか？

Comments

[nt4c]

同じコードを検証しましたが正しく動作していましたので記載のコード自体に問題は見受けられないようです。
ストアのlogin関数で引き渡しているuser.isLoginは値が正しく入っていますか？参照するより前の部分でnullが入っている可能性が高いように見えます。

[you88]

ありがとうございます。user.isLoginがたしかに空でした。おそらく今

・asyncdataの値を取得
・レンダリング
・その後にcreatedでfirebase.auth().onAuthStateChangedで情報取得しisLoginにtrueを入れる

の順番で処理をしていたためレンダリング時にnullになっていました。

[nt4c]

SSRであればcreatedでフロント処理するよりはmiddlewareなどで管理されたほうが良いかと思います。
参考：https://blog.ikedaosushi.com/entry/2019/04/17/201246
また、余計な口出しかもしれませんがstateはオブジェクトではなく「オブジェクトを返す関数」にすることを強く推奨します。公式のアナウンスにもあることですがセキュリティ上の問題を引き起こす可能性がありますので認証情報などは特に注意してください。

[you88]

ありがとうございます！middlewareに記述してみます。

ただなぜかmiddlewareに書くとonAuthStateChangedの返り値がnullになってしまいました。

これは別の問題なのでこの質問は閉じて違う質問をたてさせてもらいます。

Answer 1

middlewareに記述するかたちで書いた