Vue Router 与 Pinia 集成概述

Vue Router 与 Pinia 集成概述是 Pinia 学习中的单个核心知识点，下面直接说明用法。

定义

Vue Router 与 Pinia 集成概述是 Pinia 使用中的一个独立知识点，核心作用是：了解在路由守卫（navigation guard）中访问Store的模式与注意事项。

语法

核心理解方式：先明确它解决什么状态管理问题，再判断是否适合当前项目。

router.beforeEach((to) => {
  const authStore = useAuthStore()
  if (to.meta.requiresAuth && !authStore.token) return '/login'
})

示例

router.beforeEach((to) => {
  const authStore = useAuthStore()
  if (to.meta.requiresAuth && !authStore.token) return '/login'
})

注意事项

保持 Store 职责单一，避免把无关业务状态集中到同一个 Store。

要点总结

• Vue Router 与 Pinia 集成概述 只解决当前知识点对应的问题。
• 优先使用 Pinia 官方 API，避免引入多余封装。
• 示例代码应保持 Store 简洁、职责清晰。