我有一個加載用戶資料的導航欄,所有這一切都發生在用戶成功登入應用程式之後。問題是,在載入導覽列後,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 的同步是主要問題。