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

205次阅读
没有评论

不知道大家在平时写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`

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

关于这个问题,官网是这样解释的:链接

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

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

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

Nuxt3 报错500:[nuxt] A composable that requires access to the Nuxt instance……解决方法
/**
 * 获取所有模块列表
 */
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实例,排查一下自己的异步

正文完
 5
评论(没有评论)
验证码