Vue3 LocalStorage wird nach dem Rendern der Komponente festgelegt

Question

Ich habe eine Navigationsleiste, die Benutzerdaten lädt. Dies alles geschieht, nachdem sich der Benutzer erfolgreich bei der App angemeldet hat. Das Problem besteht darin, dass nach dem Laden der Navigationsleiste localStorage leicht eingestellt werden muss. Wenn ich es in setTimeout() einbinde, funktioniert alles einwandfrei, aber ich möchte lieber, dass meine Variablen reaktiver Natur sind, da sie sich je nach Benutzeraktivität ändern können.

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>

Ich habe versucht, Beobachter zu verwenden und setup() und data() zu verwenden, aber nichts scheint richtig zu funktionieren. Wie ich bereits erwähnt habe, funktioniert setTimeout() zwar, aber ich möchte das manuelle Auslösen des Timeouts lieber vermeiden und Vue die Dinge so handhaben lassen, wie es möchte.

Dies ist ein einfaches Beispiel. Ich kann die Dummy-Code-Seite nicht einrichten, da sie kein localStorage-Itemset hat.

Für zusätzlichen Kontext: Nachdem sich der Benutzer angemeldet hat, verwende ich async(), um die API aufzurufen, um die Kontoinformationen abzurufen und die Kontodaten in localStorage zu speichern. Ich vermute, dass der Router versucht, den Navigationsleistenbereich zu laden, weshalb das localStorage-Projekt bei der Installation der Komponente nicht verfügbar ist.

Ich kenne das zu verwendende vue3-Wort nicht, aber idealerweise hätte ich gerne eine Art asynchronen/wartenden Aufruf an localStorage, da ref() nicht so zu funktionieren scheint, wie ich es mir vorgestellt habe. Es ist, als würde ref() nicht sehen, dass localStorage aktualisiert wird.

Die Synchronisierung von localStorage ist das Hauptproblem.

Answer 1

使用已安装的生命周期挂钩。并在那里初始化用户信息