Pinia 的 Getters 不直接监听路由变化，而是接收 route 对象作为参数计算标题；推荐在 store 中定义带参 getter，组件中用 computed 结合 useRoute() 调用以实现响应式更新。
Pinia 的 Getters 本身不直接处理路由参数，但它可以配合 useRoute() 响应式读取当前路由，并把参数、路径、meta 等信息加工成页面标题——关键在于“映射逻辑”放在哪里更合理、更可复用。
标题映射的核心思路
页面标题通常由三类信息决定：路由 path（如 /user/123）、动态参数（id=123）、或预设的 meta 字段（如 meta: { title: '用户详情' }）。Getters 的作用不是“监听路由变化”，而是“给定当前 route 对象，返回计算后的标题”。它依赖外部传入 route 实例，而非自己订阅变化。
推荐做法：在 store 中定义带参数的 Getter
避免在组件里重复写标题逻辑，把映射规则收口到 Pinia store。例如：
- 定义一个 getter，接收
route对象作为参数（注意：不是从 state 读，而是函数入参） - 根据
route.name或route.meta.title返回基础标题 - 若需动态拼接（如 “编辑用户 - 张三”），再结合
route.params.id去查用户数据（此时建议搭配缓存或异步状态管理）
示例代码：
export const useAppStore = defineStore('app', {
getters: {
pageTitle: () => (route) => {
// 优先取 meta.title
if (route.meta?.title) return typeof route.meta.title === 'function'
? route.meta.title(route)
: route.meta.title
<pre class="brush:php;toolbar:false;"> // 回退到 name 映射（如 'UserDetail' → '用户详情'）
const titleMap = {
'UserDetail': '用户详情',
'PostEdit': '编辑文章',
}
return titleMap[route.name] || '系统页面'
}} })
在组件中安全调用
不能直接在 setup 里写 store.pageTitle($route) 并期望自动响应——因为 getter 是函数，Vue 不会自动追踪其内部对 route 属性的访问。正确方式是：
- 用
useRoute()获取响应式 route - 在
computed中调用 getter，并传入route.value - 确保 route 变化时 computed 重新执行
组件内写法示例：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
import { useRoute } from 'vue-router'
import { useAppStore } from '@/store'
<p>const route = useRoute()
const appStore = useAppStore()</p><p>const pageHeading = computed(() => appStore.pageTitle(route.value))</p>
模板中即可使用 {{ pageHeading }}，且随路由切换实时更新。
进阶：支持异步参数（如根据 ID 查用户名）
如果标题需要后端数据（如 /user/123 → “编辑张三”），不建议在 getter 内发起请求。更合理的链路是：
- 在路由守卫或组件
onBeforeRouteUpdate中，根据to.params.id触发用户信息加载 - 将用户名存入 store 的 state（如
userInfo.name） - getter 改为依赖该 state 和 route：
pageTitle: (state) => (route) => route.name === 'UserEdit' ? `编辑 ${state.userInfo?.name}` : ...
这样既保持 getter 纯函数特性，又实现标题动态化。
