Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un “top level await” esperando a que una promesa se resuelva dentro de una store de Pinia con Vue 3. Para usar await con Pinia debes esperar a que la promesa se resuelva fuera de la definición de la store.

En mi caso tengo la definición de mi store como se ve a continuación:

import { defineStore } from 'pinia'
import * as Comlink from "comlink"
import ArchivoWorkerPuenteWasm from "@/worker_puente_wasm?worker"
const workerPuenteWasm = new ArchivoWorkerPuenteWasm();
const envolturaWorkerPuenteWasm = Comlink.wrap(workerPuenteWasm);
await envolturaWorkerPuenteWasm.iniciar();

export const useWasmStore = defineStore('wasm', () => {
    async function ejecutarAlgo(accion:string, datos: Array<any>){
        return envolturaWorkerPuenteWasm.ejecutarAlgo(accion, datos);
    }

    return {ejecutarAlgo }
})

Y fíjate que estoy invocando a await envolturaWorkerPuenteWasm.iniciar() que es una función asíncrona dentro de mi worker expuesto con Comlink.

No es posible que funcione dentro de defineStore; debes hacerlo fuera de esa definición. Lo demás seguirá funcionando correctamente, todos los métodos serán expuestos.

Luego cuando uses esa store, el código no será ejecutado hasta que esa promesa se resuelva. Por ejemplo en App.vue se va a esperar a que useWasmStore se resuelva:

import { useWasmStore } from './stores/wasmStore';
const wasmStore = useWasmStore();
console.log("Esta línea se va a ejecutar hasta que todas las promesas de la store se resuelvan")

Usar await en una store de Pinia con Vue fue necesario porque en mi caso necesito tener mi base de datos en un singleton (mismo que es la store) y no quiero que la app se muestre hasta que la promesa de inicialización de la base de datos sea resuelta.

Para que esto funcione también necesitas usar es2022 en target dentro de build en el archivo vite.config.ts quedando así:

export default defineConfig({
  build: {
    target: "es2022",
  },
})

Con estos ajustes la app será mostrada hasta que la store resuelva la promesa.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *