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.