Nuxt3 报错500：[nuxt] A composable that requires access to the Nuxt instance……解决方法

不知道大家在平时写Nuxt的过程中有没有遇到过这种报错:

500 [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`

关于这个问题，官网是这样解释的：链接

其中最重要的就是”不能在 Nuxt 插件、Nuxt 路由中间件或 Vue 的 setup 函数之外使用这些组合式函数”，你必须同步地使用它们——即在调用组合式函数之前不能使用 await。

这是我找到的我这里导致出错的代码位置:

/**
 * 获取所有模块列表
 */
export const fetchAllModules = async () => {
    await fetchModules()
    // 如果登录了获取用户自定义模块列表
    const isLogin = checkIsLogin()
    if (isLogin) {
        await fetchUserModules()
    }
}

上面我自定义的一个函数，其中checkIsLogin函数是一个我自定义的函数，因为它在composables里面，会被放进Nuxt实例，在这里可以自动导入该函数，但是我在调用checkIsLogin函数之前用了一个await，这就会导致后面失去了Nuxt的上下文，拿不到Nuxt的实例，自然会报错。

解决方法就是官方在文档中提到的一个内置函数 runWithContext，文档地址：链接

这个方法可以解决在异步之后失去Nuxt实例，以下是我修改后的代码：

/**
 * 获取所有模块列表
 */
export const fetchAllModules = async () => {
    const app = useNuxtApp()
    await fetchModules()
    // 如果登录了获取用户自定义模块列表
    app.runWithContext(async () => {
        const isLogin = checkIsLogin()
        if (isLogin) {
            await fetchUserModules()
        }
    })
}

这样修改过后，问题即可得到解决，所以遇到这个问题，一般都是异步导致拿不到Nuxt实例，排查一下自己的异步