feat: 持久化缓存

Author: kailong321200875

mock/role/index.mock.ts

@@ -25,7 +25,8 @@ const adminList = [
         name: 'Analysis',
         meta: {
           title: 'router.analysis',
-          noCache: true
+          noCache: true,
+          affix: true
         }
       },
       {
@@ -34,7 +35,8 @@ const adminList = [
         name: 'Workplace',
         meta: {
           title: 'router.workplace',
-          noCache: true
+          noCache: true,
+          affix: true
         }
       }
     ]
@@ -359,7 +361,7 @@ const adminList = [
       },
       {
         path: 'test',
-        component: () => 'views/Function/Test',
+        component: 'views/Function/Test',
         name: 'Test',
         meta: {
           title: 'router.permission',

package.json

@@ -45,7 +45,7 @@
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
-    "pinia-plugin-persist": "^1.0.0",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "url": "^0.11.3",

src/hooks/web/usePageLoading.ts

@@ -1,13 +1,15 @@
 import { useAppStoreWithOut } from '@/store/modules/app'
 
-const appStore = useAppStoreWithOut()
-
 export const usePageLoading = () => {
   const loadStart = () => {
+    const appStore = useAppStoreWithOut()
+
     appStore.setPageLoading(true)
   }
 
   const loadDone = () => {
+    const appStore = useAppStoreWithOut()
+
     appStore.setPageLoading(false)
   }
 

src/hooks/web/useTitle.ts

@@ -3,10 +3,10 @@ import { isString } from '@/utils/is'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { useI18n } from '@/hooks/web/useI18n'
 
-const appStore = useAppStoreWithOut()
-
 export const useTitle = (newTitle?: string) => {
   const { t } = useI18n()
+  const appStore = useAppStoreWithOut()
+
   const title = ref(
     newTitle ? `${appStore.getTitle} - ${t(newTitle as string)}` : appStore.getTitle
   )

src/permission.ts

@@ -7,10 +7,6 @@ import { useNProgress } from '@/hooks/web/useNProgress'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { usePageLoading } from '@/hooks/web/usePageLoading'
 
-const permissionStore = usePermissionStoreWithOut()
-
-const appStore = useAppStoreWithOut()
-
 const { getStorage } = useStorage()
 
 const { start, done } = useNProgress()
@@ -22,6 +18,8 @@ const whiteList = ['/login'] // 不重定向白名单
 router.beforeEach(async (to, from, next) => {
   start()
   loadStart()
+  const permissionStore = usePermissionStoreWithOut()
+  const appStore = useAppStoreWithOut()
   if (getStorage(appStore.getUserInfo)) {
     if (to.path === '/login') {
       next({ path: '/' })

src/store/index.ts

@@ -1,10 +1,10 @@
 import type { App } from 'vue'
 import { createPinia } from 'pinia'
-import piniaPersist from 'pinia-plugin-persist'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 const store = createPinia()
 
-store.use(piniaPersist)
+store.use(piniaPluginPersistedstate)
 
 export const setupStore = (app: App<Element>) => {
   app.use(store)

src/store/modules/app.ts

@@ -2,9 +2,6 @@ import { defineStore } from 'pinia'
 import { store } from '../index'
 import { setCssVar, humpToUnderline } from '@/utils'
 import { ElMessage, ComponentSize } from 'element-plus'
-import { useStorage } from '@/hooks/web/useStorage'
-
-const { getStorage, setStorage } = useStorage()
 
 interface AppState {
   breadcrumb: boolean
@@ -57,14 +54,14 @@ export const useAppStore = defineStore('app', {
       fixedHeader: true, // 固定toolheader
       footer: true, // 显示页脚
       greyMode: false, // 是否开始灰色模式，用于特殊悼念日
-      dynamicRouter: getStorage('dynamicRouter'), // 是否动态路由
-      serverDynamicRouter: getStorage('serverDynamicRouter'), // 是否服务端渲染动态路由
-      fixedMenu: getStorage('fixedMenu'), // 是否固定菜单
+      dynamicRouter: false, // 是否动态路由
+      serverDynamicRouter: false, // 是否服务端渲染动态路由
+      fixedMenu: false, // 是否固定菜单
 
-      layout: getStorage('layout') || 'classic', // layout布局
-      isDark: getStorage('isDark'), // 是否是暗黑模式
-      currentSize: getStorage('currentSize') || 'default', // 组件尺寸
-      theme: getStorage('theme') || {
+      layout: 'classic', // layout布局
+      isDark: false, // 是否是暗黑模式
+      currentSize: 'default', // 组件尺寸
+      theme: {
         // 主题色
         elColorPrimary: '#409eff',
         // 左侧菜单边框颜色
@@ -217,15 +214,12 @@ export const useAppStore = defineStore('app', {
       this.greyMode = greyMode
     },
     setDynamicRouter(dynamicRouter: boolean) {
-      setStorage('dynamicRouter', dynamicRouter)
       this.dynamicRouter = dynamicRouter
     },
     setServerDynamicRouter(serverDynamicRouter: boolean) {
-      setStorage('serverDynamicRouter', serverDynamicRouter)
       this.serverDynamicRouter = serverDynamicRouter
     },
     setFixedMenu(fixedMenu: boolean) {
-      setStorage('fixedMenu', fixedMenu)
       this.fixedMenu = fixedMenu
     },
     setPageLoading(pageLoading: boolean) {
@@ -237,7 +231,6 @@ export const useAppStore = defineStore('app', {
         return
       }
       this.layout = layout
-      setStorage('layout', this.layout)
     },
     setTitle(title: string) {
       this.title = title
@@ -251,18 +244,15 @@ export const useAppStore = defineStore('app', {
         document.documentElement.classList.add('light')
         document.documentElement.classList.remove('dark')
       }
-      setStorage('isDark', this.isDark)
     },
     setCurrentSize(currentSize: ComponentSize) {
       this.currentSize = currentSize
-      setStorage('currentSize', this.currentSize)
     },
     setMobile(mobile: boolean) {
       this.mobile = mobile
     },
     setTheme(theme: ThemeTypes) {
       this.theme = Object.assign(this.theme, theme)
-      setStorage('theme', this.theme)
     },
     setCssVarTheme() {
       for (const key in this.theme) {
@@ -272,7 +262,8 @@ export const useAppStore = defineStore('app', {
     setFooter(footer: boolean) {
       this.footer = footer
     }
-  }
+  },
+  persist: true
 })
 
 export const useAppStoreWithOut = () => {

src/store/modules/lock.ts

@@ -40,10 +40,7 @@ export const useLockStore = defineStore('lock', {
       }
     }
   },
-  persist: {
-    enabled: true,
-    strategies: [{ key: 'lock', storage: localStorage }]
-  }
+  persist: true
 })
 
 export const useLockStoreWithOut = () => {

src/store/modules/permission.ts

@@ -76,7 +76,8 @@ export const usePermissionStore = defineStore('permission', {
     setMenuTabRouters(routers: AppRouteRecordRaw[]): void {
       this.menuTabRouters = routers
     }
-  }
+  },
+  persist: false
 })
 
 export const usePermissionStoreWithOut = () => {

src/store/modules/tagsView.ts

@@ -7,8 +7,6 @@ import { findIndex } from '@/utils'
 import { useStorage } from '@/hooks/web/useStorage'
 import { useAppStoreWithOut } from './app'
 
-const appStore = useAppStoreWithOut()
-
 const { getStorage } = useStorage()
 
 export interface TagsViewState {
@@ -95,6 +93,8 @@ export const useTagsViewStore = defineStore('tagsView', {
     },
     // 删除所有tag
     delAllVisitedViews() {
+      const appStore = useAppStoreWithOut()
+
       // const affixTags = this.visitedViews.filter((tag) => tag.meta.affix)
       this.visitedViews = getStorage(appStore.getUserInfo)
         ? this.visitedViews.filter((tag) => tag?.meta?.affix)
@@ -157,7 +157,8 @@ export const useTagsViewStore = defineStore('tagsView', {
         }
       }
     }
-  }
+  },
+  persist: false
 })
 
 export const useTagsViewStoreWithOut = () => {