Vue3 LocalStorage 在组件渲染后设置

我有一个加载用户数据的导航栏，所有这一切都发生在用户成功登录应用程序之后。问题是，在加载导航栏后，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 的同步是主要问题。

P粉321584263273 天前423

Vue3 LocalStorage 在组件渲染后设置

全部回复(1)我来回复