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

Question

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

ツールバー.vue

リーリー

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

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

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

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

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

Answer 1

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