在 Vue 3 + Pinia + Vue Router 项目中，不能在路由定义顶层直接调用 useStore()，否则会因 Pinia 尚未安装而报错；正确做法是将 store 访问延迟至运行时（如通过箭头函数包裹），确保 useRentalStore() 在路由解析或组件渲染阶段才执行。
在
vue
3 + pinia +
vue router
项目中，不能在
路由
定义顶层直接调用 `usestore()`，否则会因 pinia 尚未安装而报错；正确做法是将 store 访问延迟至运行时（如通过箭头函数包裹），确保 `userentalstore()` 在路由解析或组件渲染阶段才执行。
Vue Router 的路由配置文件（如 router/index.ts）通常在应用初始化早期就被加载，此时 Pinia 实例尚未通过 app.use(pinia) 安装，因此直接调用 useRentalStore() 会触发 "getActivePinia() was called but there was no active Pinia" 错误——这是 Pinia 的核心设计约束：store 工厂函数必须在 Pinia 已激活的上下文中执行。
✅ 正确解法：
延迟执行 store 访问
将 useRentalStore() 调用包裹在函数中（如 meta.breadcrumbs.label: () => useRentalStore().rental.label），使其不在模块顶层立即执行，而是等到路由元信息被实际读取时（例如在
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import { useRentalStore } from '@/stores/rentalStore'
const routes = [
{
path: '/rentals',
name: 'rental-index',
component: () => import('@/views/RentalIndex.vue'),
meta: {
breadcrumbs: {
label: 'All Rentals', // 静态标签可直接写
parent: null,
}
}
},
{
path: '/rentals/:equipment',
name: 'rental-show',
component: () => import('@/views/RentalShow.vue'),
meta: {
breadcrumbs: {
// ✅ 关键：函数式延迟求值，确保 Pinia 已就绪
label: () => useRentalStore().rental.label,
parent: 'rental-index',
}
}
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router