Whenever a user successfully logs into the application, a nav bar is supposed to load user data. However, there seems to be a timing issue with localStorage being set slightly after the nav bar is loaded. Using a setTimeout() function resolves the issue, but I would prefer a more reactive solution as the variables can change based on user activity.
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>
Despite trying watchers and using setup() instead of data(), the issue persists. While setTimeout() works, I am hesitant to manually trigger a timeout and would prefer Vue to handle this asynchronously. Creating a dummy code example is not possible as the localStorage item needs to be set.
After the user logs in, an async() call is made to the API to retrieve account information and store it in localStorage. It seems that the localStorage items are not available when the component mounts because the router is trying to load the navbar area simultaneously.
While I am unclear on the specific Vue 3 terminologies to use, I am looking for an async/await solution to retrieve data from localStorage as the ref() method does not seem to update accordingly. The synchronous nature of localStorage seems to be the root cause of the issue.