1

現在認証されているユーザーを追跡するために、Vue 2 に単純なユーザー ストアを実装しました。

次のようになります。

const user = {
  isGuest: true,

  state: {
    name: ''
  },

  save (user) {
    this.isGuest = false
    this.state = user
  },

  clear () {
    this.isGuest = true
    this.state = { }
  }
}

また、API からユーザーを取得してストアに保存する単純な認証サービス (プラグインとして実装) もあります。ユーザーがログインするたびに、またはアプリが読み込まれるたびに、認証サービスがユーザーを取得してストアに保存します。

別のコンポーネント (私のナビゲーション バー) からストアにアクセスしようとしています。userStore をインポートするために、コンポーネントにこれがあります。

import user from '../store/user'

export default {
  data () {
    return {
      user
    }
  }
}

これはすべて、Chrome と Firefox で非常にうまく機能しています。

ただし、Safari では、いくつかの奇妙な動作が発生します。

Navbar.vue ファイルを保存して navbar のデータに強制的にホット リロードを実行させると、データはストアからフェッチされます。ただし、他のすべての場合 (ページのリロード、またはログイン後の vue-router リダイレクトの後) では、navbar のデータは現在のユーザー ストアで更新されません。

これをすべてのブラウザで動作するように修正するにはどうすればよいですか?

編集：

もう少し情報があります：

Safari で更新ボタンを押すと、ランダムにユーザー ストアから正しくレンダリングされたデータを取得する場合と取得しない場合があります。

私の推測では、navbar データがレンダリングされたときにデータを利用できるように API 呼び出しが十分に速く返されることもあれば、返されないこともあります。

他のブラウザでは、ロード時にデータが利用できない場合でも、データが利用可能になるとリアクティブ データが更新されます。これは、何らかの理由で Safari には当てはまりません (ただし、ファイルを再保存して強制的に更新すると、ホット リロードが機能します)。

編集＃2：

これが問題であることを確認できます。ストアの更新時にデータが更新されません。

ストアからデータをフェッチする前に navbar コンポーネントを 2 秒間スリープ状態にすることでこれを証明し、Safari で毎回データが正しく取り込まれていることを確認しました。

では、質問はより基本的なものになります。Safari でストア パターンを使用するにはどうすればよいでしょうか。

4

1 に答える 1