Vue3 LocalStorage est défini après le rendu du composant

Question

J'ai une barre de navigation qui charge les données utilisateur, tout cela se produit une fois que l'utilisateur s'est connecté avec succès à l'application. Le problème est qu'après le chargement de la barre de navigation, localStorage doit être légèrement défini. Si je l'enveloppe dans setTimeout(), tout fonctionne bien, mais je préfère que mes variables soient de nature réactive car elles peuvent changer en fonction de l'activité de l'utilisateur.

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>

J'ai essayé d'utiliser des observateurs et d'utiliser setup() et data() mais rien ne semble fonctionner correctement. Comme je l'ai mentionné, setTimeout() fonctionne, mais je préfère éviter de déclencher le délai d'attente manuellement et laisser vue gérer les choses comme elle le souhaite.

Ceci est un exemple simple, je ne peux pas configurer le côté code factice car il n'a pas d'ensemble d'éléments localStorage.

Pour un contexte supplémentaire, une fois l'utilisateur connecté, j'utilise async() pour appeler l'API afin d'obtenir les informations du compte et de stocker les données du compte dans localStorage. Je suppose que le routeur essaie de charger la zone de la barre de navigation, c'est pourquoi le projet localStorage n'est pas disponible lorsque le composant est installé.

Je ne connais pas le mot vue3 à utiliser, mais idéalement, j'aimerais avoir une sorte d'appel asynchrone/attendre à localStorage car ref() ne semble pas fonctionner comme je le pensais. C'est comme si ref() ne voyait pas localStorage être mis à jour.

La synchronisation du stockage local est le principal problème.

Answer 1

Utilisez les hooks de cycle de vie installés. Et initialisez-y les informations utilisateur