Estoy usando Dexie para mi proyecto vue y estoy tratando de darle un nombre a Dexie DB según el nombre de usuario que haya iniciado sesión;

Estoy siguiendo esta lógica:

• El componente de inicio de sesión obtiene uid y se guarda en el almacenamiento local
• en db.js el nuevo Dexie() toma el nombre de localstorage

en login.vue

 async function submit() { const q = query( collection(remoteDb, "customers"), where("email", "==", user.value.email) ); const querySnapshot = await getDocs(q); querySnapshot.forEach((doc) => { if (doc.data().password === user.value.password) { localStorage.setItem("isLoggedIn", true); localStorage.setItem("username", doc.name); router.push({ name: "ChooseProfile" }); } else { $q.notify({ message: "incorrect password" }); } }); }

en db.js

 const db = new Dexie(`LocalDB-${localStorage.getItem("username")}`);

Pero cada vez que Dexie crea una base de datos llamada LocalDB-null, como si estuviera creando la base de datos antes de guardar el elemento de almacenamiento local. Supongo que Dexie está creando una nueva base de datos incluso cuando la base de datos aún no se ha importado en el componente.

¿Cómo hacer que espere hasta que localstorage.getItem("username") !== null para crear la base de datos?

Gracias