Vue3 LocalStorage 在元件渲染後設定

Question

我有一個加載用戶資料的導航欄，所有這一切都發生在用戶成功登入應用程式之後。問題是，在載入導覽列後，localStorage 必須稍微設定。如果我將它包裝在 setTimeout() 中，一切都會正常，但我寧願我的變數本質上是反應性的，因為它們可以根據使用者活動進行更改。

Toolbar.vue

<template>
  <!--begin::Toolbar wrapper-->
  <div class="d-flex align-items-stretch flex-shrink-0">
    <h2>check for value</h2>
    <div v-if="activeAccountId">{{activeAccountId}}</div>
  </div>
  <!--end::Toolbar wrapper-->
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "topbar",
  data() {
    let activeAccountId = ref(JSON.parse(localStorage.getItem('activeAccountId') || '{}')).value;

    return {
      activeAccountId
    }
  }
});
</script>

我嘗試過使用觀察者，並使用 setup() 和 data()，但似乎沒有任何效果正常。正如我所提到的，setTimeout() 確實有效，但我寧願避免手動觸發超時並讓 vue 按照它想要的方式處理事情。

這是一個簡單的範例，我無法設定虛擬程式碼端，因為它沒有 localStorage 項目集。

對於一些其他上下文，在使用者登入後，我使用 async() 呼叫 API 來取得帳戶資訊並將帳戶資料儲存在 localStorage 中。我猜測路由器正在嘗試載入導覽列區域，這就是為什麼在組件安裝時 localStorage 項目不可用。

我不知道要使用的 vue3 單詞，但理想情況下我希望對 localStorage 進行某種類型的 async/await 調用，因為 ref() 似乎沒有按照我想像的方式工作。就好像 ref() 沒有看到 localStorage 得到更新。

localStorage 的同步是主要問題。

Answer 1

使用已安裝的生命週期掛鉤。並在那裡初始化用戶資訊