vuejs / pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support

Home Page:https://pinia.vuejs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cant create an async store

MickL opened this issue · comments

Steps to reproduce the bug

Not sure if this is a bug or if I am overseeing something, but stores dont work with async:

export const useMySuperStore = defineStore('super', async () => {
   const { data, pending, error } = await useFetch<SomeResponse>('/api/my-endpoint');

  return {
    // State
    data,
    pending,
    error,

    // Getters

    // Actions
  };
});

Now all states are undefined available when using the store in template:

<script setup lang="ts">
   const store = await useMySuperStore();
   console.log(store.pending);
   console.log(store.error);
   console.log(store.data);
</script>

<template>
</template>

The same code works without async / await but then Nuxt doesnt wait for useFetch() to finish on SSR.

This is intended, otherwise you would have to await the creation of the store and other mechanisms wouldn’t work

@posva I see, but how to use useFetch() to preload data while SSR with a Pinia store otherwise as shown in the example above?

Any news about this?