Vue Store 中封装通用 API 缓存应让请求层（如 axios）自主管理缓存，store 仅消费数据；通过 URL、参数、method 生成唯一 key，区分 sessionStorage（页面级）、localStorage（业务级）及服务端协同缓存，并提供 cacheApi 高阶函数与 invalidateCache 清除机制。
在 Vue Store 中封装通用 API 缓存逻辑，关键不是把缓存塞进 Vuex/Pinia 的 state 里，而是让请求层自带缓存能力，并与 store 解耦又可协同。核心思路是：缓存行为发生在 API 调用前/后，由统一的请求实例控制，store 只负责消费数据、触发更新，不参与缓存决策。
用 axios 实例 + 缓存键生成策略
缓存有效性取决于「请求唯一性」。需基于 URL、参数（含 query 和 body）、method 生成稳定 key：
- GET 请求：拼接 baseURL + path + JSON.stringify(sortedQuery)
- POST/PUT 等：对请求体做 JSON.stringify(sortObject(body)) 后哈希（如用 murmurhash3）
- 避免缓存敏感操作：带 token、时间戳、随机数的请求默认跳过缓存，或显式加
cache: false标记
分层缓存适配不同场景
单一 localStorage 不够用，应按生命周期和作用域区分：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
短期页面级缓存：用
sessionStorage存响应数据 + 过期时间戳，适合搜索结果、表单预填等，关闭标签即失效 -
长期业务级缓存：用
localStorage+ 版本号（如api_v2_user_profile），配合接口返回的cache-control或自定义maxAge字段自动清理 -
服务端协同缓存：在 axios 拦截器中透传
Cache-Control、If-None-Match，让 CDN 或中间件参与，store 层无感但实际提速
封装成可复用的 cacheApi 工具函数
不侵入 store，而是导出一个高阶函数，让各模块 API 调用时按需启用缓存：
立即学习“前端免费学习笔记（深入）”；
- 定义
cacheApi(fn, options = { maxAge: 60_000, storage: 'local' })，接收原始请求函数（如getUser(id)） - 内部自动计算 key，读取对应 storage；命中则直接 resolve 缓存值；未命中则执行原函数，写入缓存后返回
- 在 API 模块中这样使用：
export const getCachedProduct = cacheApi(productApi.getProduct, { maxAge: 300_000 })
与 Pinia/Vuex 协同更新状态
缓存是副作用，store 仍应保持响应式驱动。推荐模式：
- 组件中 dispatch action 时，先调用缓存版 API 获取数据，再 commit 到 store
- action 内部可判断是否「强制刷新」（如下拉刷新），跳过缓存直连网络
- 全局提供
invalidateCache(keyPattern)方法，当数据变更（如编辑成功）时主动清除相关 key，保证一致性
