Skip to content

Store API ​

useRouterStore ​

ts
const store = useRouterStore<VmoRouteToRaw<Meta>>()

在安装 Pinia 后调用。store ID 为 router,同一 Pinia 实例内共享状态,不要与应用自己的同名 store 冲突。

Getters ​

Getter含义
getCachedRoutes内存配置优先,否则使用注入的 getter,默认空数组
getKeepAliveRouteNamesKeepAlive 名单
getMutipleCatch是否保存多个动态路由,默认 true
getBrowserBeforeunloadDisabled刷新关闭保护,默认 false
getRouteToLeaveDisabledSPA 离开保护,默认 false
getKeepAliveMax名单上限,未设置或 0 表示不限制
getCacheMethod当前持久化回调对象
getConfirmToLeaveMethod当前确认方法

Actions ​

Action行为
insertCachedRoute(to)按名称插入或更新,执行 setter
removeCachedRoute(name)删除配置并执行 setter,名称支持 string/symbol
clearDynamicRouters()清空配置并执行 setter,不删除真实路由
setCacheMethods({ getter, setter })设置同步持久化回调
setMutipleCatch(boolean)切换持久化模式,下一次写入生效
setKeepAliveName(string | string[])替换名单
insertKeepAliveName(string | string[])去重插入并按上限裁剪
removeKeepAliveName(string | string[])删除名单中的名称
setKeepAliveMax(number = 0)取绝对值并四舍五入;后续插入时裁剪
setBrowserBeforeunloadDisabled(boolean)设置刷新关闭保护
setRouteToLeaveDisabled(boolean)设置 SPA 离开保护
setConfirmToLeaveMethod(fn)设置接收离开页 meta 的确认回调

缓存配置需要可序列化时请使用字符串路由名。多个 router 共用该 store 时会共享名单与开关,当前主要使用方式是一个应用一个 router。

状态默认值 ​

状态默认值说明
cachedRoutesnullnull 时 getter 回退到持久化 getter 或空数组;写入后以内存数组为准
cacheMethodsundefined不默认选择 localStorage 或 sessionStorage
mutipleCatchtrue保留多个配置;false 表示每次写入只留本条
keepAliveRouteNames[]组件 include 名单,不是组件实例
keepAliveMaxundefined未设置或 0 不限制
routeToLeaveDisabledfalsetrue 启用 SPA 离开确认
browserBeforeunloadDisabledfalsetrue 启用浏览器刷新/关闭保护
confirmToLeaveMethodasync () => true默认放行,不自动弹窗

所有 action 同步返回 void;注册的确认回调本身可以返回 Promise。getter 只读取状态,不注册路由。下表补充参数、写入时机和边界:

Action参数 / 默认值副作用与边界
insertCachedRouteto: RouteToRaw多缓存按 name 更新或追加;单缓存替换整个数组;每次调用 setter
removeCachedRoutename: string或symbol过滤配置,即使名称不存在也调用 setter
clearDynamicRouters无cachedRoutes=[] 并调用 setter;不清理注册清单或 KeepAlive
setCacheMethods同步 getter/setter仅设置回调,不立即读取、写入或恢复;已有 cachedRoutes 数组会优先于 getter
setMutipleCatchboolean仅改变后续写入策略,不立刻裁剪已有配置
setKeepAliveNamestring或string[]直接替换名单,不去重、不按 max 裁剪
insertKeepAliveNamestring或string[]去重后按插入顺序保留最后 max 项;重复名称不会移动到末尾
removeKeepAliveNamestring或string[]按名称移除,不删除路由或持久化配置
setKeepAliveMaxnumber=0Math.round(Math.abs(max));仅在后续 insert 时应用
setRouteToLeaveDisabledboolean仅设置 SPA 开关;成功导航自动重置 false
setBrowserBeforeunloadDisabledboolean仅设置浏览器开关;还需安装生命周期监听
setConfirmToLeaveMethod(meta) => boolean或Promise<boolean>替换回调,接收离开页面的 meta,不是目标页

业务持久化写入的 setter 应同步处理自身错误;action 不捕获存储错误,可能在内存已更新后抛出。空数组会阻止 getter 回退,切换账号通常先 clearRoutes,再显式载入新定义,不能仅更换 getter 就期待自动恢复。

ts
store.setKeepAliveMax(5)
store.insertKeepAliveName(['report-monthly', 'report-yearly'])
store.setConfirmToLeaveMethod(async () => window.confirm('放弃未保存修改?'))
store.setRouteToLeaveDisabled(true)
// 保存完成后:
store.setRouteToLeaveDisabled(false)

router.removeRoute/clearRoutes 同步多种状态;这些 store action 各自只处理自己的状态,不可将 clearDynamicRouters 当成清理真实路由的替代品。

Getter 返回类型 ​

getCachedRoutes 返回 RouteToRaw[];getKeepAliveRouteNames 返回 string[];getMutipleCatch、getBrowserBeforeunloadDisabled、getRouteToLeaveDisabled 返回 boolean;getKeepAliveMax 返回 number | undefined;getCacheMethod 返回 CacherMethods<RouteToRaw> | undefined;getConfirmToLeaveMethod 返回确认回调或 undefined。