深入解析 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：数据在会话期间有效，关闭浏览器后清除