Vue routes.js中调用composable方法报inject警告的解决方法

Vue 组合式API的composable调用规则明确要求：如果composable内部使用了inject()获取依赖，调用时必须存在活跃的Vue组件setup()上下文、或处于函数式组件的执行阶段。你在routes.js模块顶层直接调用useFN()时，Vue应用还未完成初始化、没有可用的组件实例上下文，inject()无法找到注入的依赖，就会抛出对应警告。

方案1：将composable调用移到路由守卫回调内部 #

路由守卫触发时Vue应用已经完成挂载，全局注入的依赖都已就绪，此时调用composable符合上下文要求，修改后的代码如下：

import { createWebHistory, createRouter } from "vue-router";
import useFN from "./composables/FN"

const routes = [
    // 路由定义
]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

// 移除模块顶层的useFN()调用
router.beforeEach(async (to, from, next) => {
    // 在守卫回调内部调用composable
    const { hasAccess } = useFN()
    const isAllow = await hasAccess();
    console.log(isAllow);
    // 可在这里补充权限拦截逻辑，例如无权限时跳转403页面
    // if (!isAllow) return next('/403')
    next()
})

export default router;

方案2：抽离纯逻辑为普通工具函数（推荐用于权限判断场景） #

权限校验本质是无UI的纯逻辑判断，不需要依赖Vue组件上下文。你可以把hasAccess的核心判断逻辑从composable中抽离成独立的普通JS工具函数，composable和路由守卫都可以直接引入调用，从根源上避免上下文限制问题。

针对依赖全局状态的特殊处理 #

如果你的useFN内部用到了Pinia、VueRouter这类原本通过inject获取的全局实例，可以直接手动传入实例绕开上下文要求：

• 先在初始化Pinia/Router的入口文件（通常是main.js）导出创建好的实例
• 在路由文件中引入实例后，初始化对应Store/路由对象时手动传入实例即可，不需要依赖inject
  示例代码：

// 从main.js引入提前导出的pinia实例
import pinia from './main'
import { useUserStore } from './store/user'
// 手动传入pinia实例初始化store，无需组件上下文
const userStore = useUserStore(pinia)

// 之后就可以直接在路由顶层调用store里的权限方法
router.beforeEach(async (to, from, next) => {
    const isAllow = await userStore.hasAccess(to.path)
    next(isAllow ? true : '/403')
})

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