[解決済み] ページ更新時のVuexの状態

質問

私のアプリは、ユーザー認証にFirebase APIを使用し、ログイン状態をVuex Stateにboolean値として保存しています。

ユーザーがログインしたときに ログイン状態 で、それに応じてログイン/ログアウトボタンを条件付きで表示します。

しかし、ページをリフレッシュすると、vueアプリの状態は失われ、デフォルトにリセットされます。

このため、ユーザーがログインしている状態でページを更新した場合でも ログイン状態 に戻されます。 虚偽 と表示され、ログインしたままなのにログアウトボタンではなくログインボタンが表示される...。

この動作を防ぐにはどうしたらよいですか？

を使用しましょうか？ クッキー あるいは、もっと良い解決策があるのでは...。

-

解決方法は？

これは既知のユースケースです。さまざまな解決策があります。

例えば vuex-persistedstate . このプラグインは vuex を使用して、ページ更新の間の状態を処理し、保存します。

サンプルコードです。

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
    })
  ]
})

ここでやることは単純です。

1. をインストールする必要があります。 js-cookie
2. について getState から保存された状態を読み込もうとします。 Cookies
3. オン setState に状態を保存します。 Cookies

Docsとインストール手順。 https://www.npmjs.com/package/vuex-persistedstate