perf: perf store

package.json

@@ -42,7 +42,6 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.22",
-    "pinia-plugin-persistedstate": "^2.2.0",
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
     "url": "^0.11.0",

src/main.ts

@@ -4,13 +4,11 @@ import '@/plugins/windi.css'
 // 导入全局的svg图标
 import '@/plugins/svgIcon'
 
-import './store'
-
 // 初始化多语言
 import { setupI18n } from '@/plugins/vueI18n'
 
 // 引入状态管理
-// import { setupStore } from '@/store'
+import { setupStore } from '@/store'
 
 // 全局组件
 import { setupGlobCom } from '@/components'
@@ -42,7 +40,7 @@ const setupAll = async () => {
 
   await setupI18n(app)
 
-  // setupStore(app)
+  setupStore(app)
 
   setupGlobCom(app)
 

src/store/index.ts

@@ -1,22 +1,10 @@
-// TODO: 感觉这样是有问题的，但目前还没想到更好的办法
+import type { App } from 'vue'
 import { createPinia } from 'pinia'
 
-import { createApp } from 'vue'
-
-import App from '../App.vue'
-
-import { createPersistedState } from 'pinia-plugin-persistedstate'
-
-const app = createApp(App)
-
 const store = createPinia()
 
-store.use(
-  createPersistedState({
-    storage: sessionStorage
-  })
-)
-
-app.use(store)
+export const setupStore = (app: App<Element>) => {
+  app.use(store)
+}
 
 export { store }

src/store/modules/app.ts

@@ -2,6 +2,9 @@ import { defineStore } from 'pinia'
 import { store } from '../index'
 import { setCssVar, humpToUnderline } from '@/utils'
 import { ElMessage } from 'element-plus'
+import { useCache } from '@/hooks/web/useCache'
+
+const { wsCache } = useCache()
 
 type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'
 
@@ -71,12 +74,12 @@ export const useAppStore = defineStore('app', {
       fixedHeader: true, // 固定toolheader
       footer: true, // 显示页脚
       greyMode: false, // 是否开始灰色模式，用于特殊悼念日
-      dynamicRouter: false, // 是否动态路由
+      dynamicRouter: wsCache.get('dynamicRouter') || false, // 是否动态路由
 
-      layout: 'classic', // layout布局
-      isDark: false, // 是否是暗黑模式
-      currentSize: 'default', // 组件尺寸
-      theme: {
+      layout: wsCache.get('layout') || 'classic', // layout布局
+      isDark: wsCache.get('isDark') || false, // 是否是暗黑模式
+      currentSize: wsCache.get('default') || 'default', // 组件尺寸
+      theme: wsCache.get('theme') || {
         // 主题色
         elColorPrimary: '#409eff',
         // 左侧菜单边框颜色
@@ -108,7 +111,6 @@ export const useAppStore = defineStore('app', {
       }
     }
   },
-  persist: true,
   getters: {
     getBreadcrumb(): boolean {
       return this.breadcrumb
@@ -224,7 +226,7 @@ export const useAppStore = defineStore('app', {
       this.greyMode = greyMode
     },
     setDynamicRouter(dynamicRouter: boolean) {
-      // wsCache.set('dynamicRouter', dynamicRouter)
+      wsCache.set('dynamicRouter', dynamicRouter)
       this.dynamicRouter = dynamicRouter
     },
     setPageLoading(pageLoading: boolean) {
@@ -236,7 +238,7 @@ export const useAppStore = defineStore('app', {
         return
       }
       this.layout = layout
-      // wsCache.set('layout', this.layout)
+      wsCache.set('layout', this.layout)
     },
     setTitle(title: string) {
       this.title = title
@@ -250,18 +252,18 @@ export const useAppStore = defineStore('app', {
         document.documentElement.classList.add('light')
         document.documentElement.classList.remove('dark')
       }
-      // wsCache.set('isDark', this.isDark)
+      wsCache.set('isDark', this.isDark)
     },
     setCurrentSize(currentSize: ElememtPlusSize) {
       this.currentSize = currentSize
-      // wsCache.set('currentSize', this.currentSize)
+      wsCache.set('currentSize', this.currentSize)
     },
     setMobile(mobile: boolean) {
       this.mobile = mobile
     },
     setTheme(theme: ThemeTypes) {
       this.theme = Object.assign(this.theme, theme)
-      // wsCache.set('theme', this.theme)
+      wsCache.set('theme', this.theme)
     },
     setCssVarTheme() {
       for (const key in this.theme) {

src/store/modules/dict.ts

@@ -11,7 +11,6 @@ export const useDictStore = defineStore('dict', {
     isSetDict: false,
     dictObj: {}
   }),
-  persist: true,
   getters: {
     getDictObj(): Recordable {
       return this.dictObj

src/store/modules/locale.ts

@@ -2,6 +2,9 @@ import { defineStore } from 'pinia'
 import { store } from '../index'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import en from 'element-plus/es/locale/lang/en'
+import { useCache } from '@/hooks/web/useCache'
+
+const { wsCache } = useCache()
 
 const elLocaleMap = {
   'zh-CN': zhCn,
@@ -16,8 +19,8 @@ export const useLocaleStore = defineStore('locales', {
   state: (): LocaleState => {
     return {
       currentLocale: {
-        lang: 'zh-CN',
-        elLocale: elLocaleMap['zh-CN']
+        lang: wsCache.get('lang') || 'zh-CN',
+        elLocale: elLocaleMap[wsCache.get('lang') || 'zh-CN']
       },
       // 多语言
       localeMap: [
@@ -32,7 +35,6 @@ export const useLocaleStore = defineStore('locales', {
       ]
     }
   },
-  persist: true,
   getters: {
     getCurrentLocale(): LocaleDropdownType {
       return this.currentLocale
@@ -46,7 +48,7 @@ export const useLocaleStore = defineStore('locales', {
       // this.locale = Object.assign(this.locale, localeMap)
       this.currentLocale.lang = localeMap?.lang
       this.currentLocale.elLocale = elLocaleMap[localeMap?.lang]
-      // wsCache.set('lang', localeMap?.lang)
+      wsCache.set('lang', localeMap?.lang)
     }
   }
 })

src/store/modules/permission.ts

@@ -18,7 +18,6 @@ export const usePermissionStore = defineStore('permission', {
     isAddRouters: false,
     menuTabRouters: []
   }),
-  persist: true,
   getters: {
     getRouters(): AppRouteRecordRaw[] {
       return this.routers