N
Nuxt3mo ago
Phillip

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