设置中的await useAsyncData不会阻止Nuxt 3中的导航

Question

我想等到导航到下一页，直到获取并设置商店数据。 我正在使用 Nuxt 3 + Supabase + Pinia

我在provider.vue中的方法（用户在登录/注册后被重定向以设置cookie等）

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

app.vue

：获取商店数据。 我希望通过使用await useAsyncData来阻止导航

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

我的商店（为了演示目的减少了数据）

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;
        },
    }
})

...但是，在provider.vue重定向我之后，该值在我的可组合项之一中未定义：

const { company } = storeToRefs(useUserStore())

如何让应用程序等待商店设置完成？

Answer 1

也许这就是您正在寻找的：

https://nuxt.com/docs/api/utils/call-once