Nuxt3插件内调用Pinia Store报错，提示“处于插件上下文之外”

环境版本 #

已安装依赖版本：

nuxt@3.7.4
@pinia/nuxt@0.4.11
pinia@2.1.6

nuxt.config.ts 相关配置片段 #

modules: [
    '@pinia/nuxt',
],
plugins: [
    { src: '~/plugins/router.ts' }
],
imports: {
    dirs: ['stores'],
    presets: [
        {
            from: 'pinia',
            imports: ['storeToRefs']
        }
    ]
}

问题代码（~/plugins/router.ts，自动导入） #

export default defineNuxtPlugin((nuxtApp) => {
    useRouter().beforeEach(() => {
        const store = useAuthStore();
        console.log(store.isAuthenticated);
    });
});

报错信息 #

执行上述代码后，浏览器控制台抛出以下错误，应用无法加载：

Uncaught Error: [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.

尝试的替代代码 #

将插件代码修改为以下形式后，应用可以正常运行，控制台能输出Pinia对象：

export default defineNuxtPlugin((nuxtApp) => {
    useRouter().beforeEach(() => {
        console.log(nuxtApp.vueApp.$nuxt.$pinia);
    });
});

核心疑问 #

原本以为在路由beforeEach闭包内调用useAuthStore()可以正常访问Pinia Store，但实际报错。虽然修改后能打印出Pinia对象，但还是无法访问自定义的Store。折腾数小时仍找不到问题根源和解决方法。

编辑补充 #

控制台打印的$pinia对象是响应式的，打印时其实还未加载完成，只是展开对象面板时后续代码已执行完毕，Store才处于可用状态。

解决方法 #

原因分析 #

路由守卫的回调函数不属于Nuxt的插件上下文、钩子、中间件或Vue的setup函数范畴，直接在里面调用useAuthStore()这类依赖Nuxt实例的组合式API，会导致实例上下文丢失，因此报错。

具体方案 #

方案1：插件上下文内预取Store实例

插件本身处于Nuxt实例上下文里，先在这里拿到Store引用，再在路由守卫中直接使用：

export default defineNuxtPlugin(() => {
    const authStore = useAuthStore();
    useRouter().beforeEach(() => {
        console.log(authStore.isAuthenticated);
    });
});

方案2：使用Nuxt专属路由中间件

Nuxt3推荐用路由中间件处理路由权限逻辑，更贴合框架生命周期：

1. 在~/middleware/auth.global.ts创建全局中间件：

export default defineNuxtRouteMiddleware(() => {
    const authStore = useAuthStore();
    console.log(authStore.isAuthenticated);
});

2. 无需额外配置，Nuxt会自动识别并加载带.global.ts后缀的全局中间件。

方案3：手动注入Pinia实例到Store

如果必须在插件内的路由守卫里创建Store实例，可通过nuxtApp获取Pinia后手动传入：

export default defineNuxtPlugin((nuxtApp) => {
    useRouter().beforeEach(() => {
        const authStore = useAuthStore(nuxtApp.$pinia);
        console.log(authStore.isAuthenticated);
    });
});

内容的提问来源于stack exchange，提问作者Rick Kukiela