Tengo una barra de navegación que carga los datos del usuario, todo esto sucede después de que un usuario inicia sesión correctamente en la aplicación. El problema es que localStorage debe configurarse ligeramente después de cargar la barra de navegación. Si lo envuelvo en setTimeout(), todo funciona, pero prefiero que mis variables sean de naturaleza reactiva, ya que pueden cambiar según la actividad del usuario.

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>

Intenté usar observadores y usar setup() versus data(), pero nada parece funcionar correctamente. Como mencioné, setTimeout() funciona, pero prefiero evitar activar manualmente un tiempo de espera y dejar que vue maneje las cosas como quiera.

Aquí hay un ejemplo simple, no puedo configurar un lado de código ficticio ya que no tendrá el conjunto de elementos localStorage.

Para un contexto adicional, después de que el usuario haya iniciado sesión, estoy presionando la API con un async () para obtener la información de la cuenta y almacenar los datos de la cuenta en localStorage. Supongo que, al mismo tiempo, el enrutador intenta cargar el área de la barra de navegación, razón por la cual los elementos de almacenamiento local no están disponibles cuando se monta el componente.

No conozco las palabras de vue3 para usar, pero idealmente me gustaría algún tipo de llamada asincrónica/en espera a localStorage porque ref() no parece funcionar como pensé que lo haría. Es como si ref() no viera que localStorage se actualiza.

localStorage siendo síncrono es el problema principal.