検索

ホームページ  >  に質問  >  本文

Vue3 LocalStorage はコンポーネントのレンダリング後に設定されます

ユーザー データをロードするナビゲーション バーがあります。これはすべて、ユーザーがアプリケーションに正常にログインした後に行われます。問題は、ナビゲーションバーをロードした後、localStorage を少し設定する必要があることです。これを setTimeout() でラップするとすべて問題なく動作しますが、変数はユーザーのアクティビティに基づいて変更される可能性があるため、本質的にリアクティブである方が望ましいと考えます。

ツールバー.vue

リーリー

オブザーバーを使用したり、setup() や data() を使用したりしてみましたが、何も正しく動作しないようです。前述したように、setTimeout() は機能しますが、タイムアウトを手動でトリガーすることは避け、vue が望むように処理できるようにしたいと考えています。

これは簡単な例です。localStorage アイテムセットがないため、ダミー コード側をセットアップできません。

追加のコンテキストとして、ユーザーがログインした後、async() を使用して API を呼び出し、アカウント情報を取得し、アカウント データを localStorage に保存します。ルーターがナビゲーション バー領域をロードしようとしているため、コンポーネントのインストール時に localStorage プロジェクトが使用できないのだと思います。

使用する vue3 単語はわかりませんが、ref() が思ったように動作していないようなので、理想的には localStorage への何らかの非同期/待機呼び出しを行いたいと考えています。 ref() が localStorage の更新を認識していないようなものです。

localStorage の同期が主な問題です。

P粉321584263P粉321584263242日前403

全員に返信(1)返信します

  • P粉146080556

    P粉1460805562024-03-26 14:38:11

    インストールされたライフサイクル フックを使用します。そしてそこでユーザー情報を初期化します

    返事
    0
  • キャンセル返事