Nuxt•10mo ago

await useAsyncData in setup doesn't block navigation

I want to wait until navigating to the next page until the store data has been fetched and set. I'm using Nuxt 3 + Supabase + Pinia My approach in provider.vue (where user gets redirected after signing in/up to set cookies etc.)

// redirect once user has been set
const user = useSupabaseUser()
watch(user, async () => {
    if (user.value) {
        await useSteps().handleNavigateToNextStep()
    }
}, { immediate: true })

// redirect once user has been set
const user = useSupabaseUser()
watch(user, async () => {
    if (user.value) {
        await useSteps().handleNavigateToNextStep()
    }
}, { immediate: true })

app.vue: fetch store data. I'm hoping to block navigation by using await useAsyncData

const user = useSupabaseUser()
await useAsyncData('userStoreData', async () => {
  if (user.value) {
    await useUserStore().fetchInitialData()
  }
}, { watch: [user] })

const user = useSupabaseUser()
await useAsyncData('userStoreData', async () => {
  if (user.value) {
    await useUserStore().fetchInitialData()
  }
}, { watch: [user] })

my store (reduced data for demonstration purpose)

export const useUserStore = defineStore({
    id: 'UserStore',
    state: () => ({
        company: null as Tables<'company'> | null,
    }),
    actions: {
        async fetchInitialData() {
            const [companyData] = await Promise.all([
                useCompany().getCompany(),
            ])
            this.company = companyData;
        },
    }
})

export const useUserStore = defineStore({
    id: 'UserStore',
    state: () => ({
        company: null as Tables<'company'> | null,
    }),
    actions: {
        async fetchInitialData() {
            const [companyData] = await Promise.all([
                useCompany().getCompany(),
            ])
            this.company = companyData;
        },
    }
})

... however, after the provider.vue redirects me, this value is undefined in one of my composables: const { company } = storeToRefs(useUserStore()) How can I make the application wait until the store has been set?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

await useAsyncData in setup doesn't block navigation