Quasar项目中如何在beforeEach里避免Pinia的inject警告？

问题核心是useAuthStore()钩子依赖Vue的inject API，而路由守卫的beforeEach函数不在组件的setup()上下文或函数组件中，因此触发了这个警告。解决的关键是手动将Pinia实例传递给useAuthStore，而非依赖自动注入。

修改方案一：导出并复用Pinia实例 #

1. 确保Pinia实例可被导入
   如果你在Quasar的boot/pinia.js中初始化Pinia，修改代码导出实例：

   // boot/pinia.js
   import { createPinia } from 'pinia'
   
   const pinia = createPinia()
   
   export default ({ app }) => {
     app.use(pinia)
   }
   
   // 导出Pinia实例供外部使用
   export { pinia }
   

2. 在路由守卫中传入Pinia实例
   更新你的路由守卫代码：

   import { useAuthStore } from "stores/auth-store";
   import { useRouter } from 'vue-router'
   // 导入已初始化的Pinia实例
   import { pinia } from 'boot/pinia'
   
   const router = useRouter()
   // 手动传入pinia实例创建store
   const store = useAuthStore(pinia)
   
   const beforeEach = ((to, from, next) => {
     if (to.meta.needsAuth) {
       if (store.authenticated) {
         next()
       } else {
         router.push('/')
       }
     } else {
       next()
     }
   })
   
   export default beforeEach
   

修改方案二：从路由实例中获取Pinia #

如果不想修改Pinia初始化代码，可直接从路由关联的app实例中提取Pinia：

import { useAuthStore } from "stores/auth-store";
import { useRouter } from 'vue-router'

const router = useRouter()

const beforeEach = ((to, from, next) => {
  // 从router的app实例中获取Pinia
  const pinia = router.app.config.globalProperties.$pinia
  const store = useAuthStore(pinia)

  if (to.meta.needsAuth) {
    if (store.authenticated) {
      next()
    } else {
      router.push('/')
    }
  } else {
    next()
  }
})

export default beforeEach

两种方法都能让你在路由守卫中正常使用Pinia，彻底消除inject()相关警告。

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