深入解析 Vue 项目中的缓存刷新机制：原理与实战

前言

在 Vue 项目中，缓存通常用于存储用户信息、角色权限、系统设置等，以提高页面加载速度并减少 API 请求

这里使用 web-storage-cache 作为封装的本地存储工具，支持 localStorage 和 sessionStorage 方式存储数据

1. Demo

适用于所有涉及权限、用户数据更新的场景，如角色变更、权限调整、系统升级等
使用缓存提高性能，但需要适时刷新，避免数据过时问题
通过 封装 useCache 统一管理本地存储，方便切换 localStorage 和 sessionStorage，提高代码复用性

/*** 配置浏览器本地存储的方式，可直接存储对象数组。*/import WebStorageCache from 'web-storage-cache'type CacheType = 'localStorage' | 'sessionStorage'export const CACHE_KEY = {// 用户相关ROLE_ROUTERS: 'roleRouters',USER: 'user',// 系统设置IS_DARK: 'isDark',LANG: 'lang',THEME: 'theme',LAYOUT: 'layout',DICT_CACHE: 'dictCache',// 登录表单LoginForm: 'loginForm',TenantId: 'tenantId'
}export const useCache = (type: CacheType = 'localStorage') => {const wsCache: WebStorageCache = new WebStorageCache({storage: type})return {wsCache}
}export const deleteUserCache = () => {const { wsCache } = useCache()wsCache.delete(CACHE_KEY.USER)wsCache.delete(CACHE_KEY.ROLE_ROUTERS)// 注意，不要清理 LoginForm 登录表单
}

对应具体Demo如下：

<template><el-button plain @click="refreshMenu"><Icon class="mr-5px" icon="ep:refresh" />刷新菜单缓存</el-button>
</template><script setup>
import { useCache } from '@/hooks/web/useCache'
import { CACHE_KEY } from '@/hooks/web/useCache'
import { useMessage } from '@/hooks/web/useMessage'const { wsCache } = useCache()
const message = useMessage()const refreshMenu = async () => {try {await message.confirm('即将更新缓存刷新浏览器！', '刷新菜单缓存')wsCache.delete(CACHE_KEY.USER)wsCache.delete(CACHE_KEY.ROLE_ROUTERS)location.reload()} catch {}
}
</script>

2. 知识拓展

上述实战知识点，核心拓展如下：

refreshMenu 该方法的主要作用是：

1. 弹出确认框，提示用户即将刷新缓存，并要求确认操作
2. 删除本地存储中的 USER 和 ROLE_ROUTERS 缓存，确保下次访问时重新获取最新数据
3. 通过 location.reload() 重新加载页面，使更新的缓存生效

const refreshMenu = async () => {try {await message.confirm('即将更新缓存刷新浏览器！', '刷新菜单缓存')// 清空缓存wsCache.delete(CACHE_KEY.USER)wsCache.delete(CACHE_KEY.ROLE_ROUTERS)// 刷新浏览器location.reload()} catch {}
}

1.2 CACHE_KEY 配置
CACHE_KEY 统一管理缓存键名，避免在多个地方直接使用字符串，从而降低维护成本：

export const CACHE_KEY = {ROLE_ROUTERS: 'roleRouters',  // 角色路由信息USER: 'user',                 // 用户信息IS_DARK: 'isDark',            // 深色模式LANG: 'lang',                 // 语言THEME: 'theme',               // 主题LAYOUT: 'layout',             // 布局DICT_CACHE: 'dictCache',      // 字典缓存LoginForm: 'loginForm',       // 登录表单（不应清除）TenantId: 'tenantId'          // 租户ID
}

1.3 useCache 封装
useCache 方法封装了 WebStorageCache，便于在项目中按需切换 localStorage 和 sessionStorage：

export const useCache = (type: CacheType = 'localStorage') => {const wsCache: WebStorageCache = new WebStorageCache({storage: type})return {wsCache}
}

localStorage：数据持久化，即使关闭浏览器也不会丢失。
sessionStorage：数据在会话期间有效，关闭浏览器后清除