From d416178d69ca6100be4b635922b1a22d27629f08 Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Sat, 8 Oct 2022 11:28:50 +0800 Subject: [PATCH] perf: perf store --- package.json | 1 - src/main.ts | 6 ++---- src/store/index.ts | 20 ++++---------------- src/store/modules/app.ts | 24 +++++++++++++----------- src/store/modules/dict.ts | 1 - src/store/modules/locale.ts | 10 ++++++---- src/store/modules/permission.ts | 1 - 7 files changed, 25 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 3046b56d5..d59367ca0 100644 --- a/package.json +++ b/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", diff --git a/src/main.ts b/src/main.ts index 86a6e0d0f..c2ba4b20c 100644 --- a/src/main.ts +++ b/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) diff --git a/src/store/index.ts b/src/store/index.ts index f5713c646..65964ea8f 100644 --- a/src/store/index.ts +++ b/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) => { + app.use(store) +} export { store } diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 431000147..25e718160 100644 --- a/src/store/modules/app.ts +++ b/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) { diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts index 0db17d3e8..93dd46edf 100644 --- a/src/store/modules/dict.ts +++ b/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 diff --git a/src/store/modules/locale.ts b/src/store/modules/locale.ts index dc6ed5816..90a0d557d 100644 --- a/src/store/modules/locale.ts +++ b/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) } } }) diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index 29d62aa5f..63eb0dafa 100644 --- a/src/store/modules/permission.ts +++ b/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