From be3a8a69490646b53eacf7d1be68656363f6513c Mon Sep 17 00:00:00 2001 From: lrl <742798240@qq.com> Date: Sat, 27 Nov 2021 19:04:14 +0800 Subject: [PATCH] perf: storage tags --- src/layout/index.vue | 6 ++- src/router/index.ts | 7 +-- src/utils/storage/responsive.ts | 86 ++++++++++++++++++--------------- 3 files changed, 56 insertions(+), 43 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index e6b22dba7..251b4895c 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -17,6 +17,7 @@ import fullScreen from "/@/assets/svg/full_screen.svg"; import exitScreen from "/@/assets/svg/exit_screen.svg"; import { deviceDetection } from "/@/utils/deviceDetection"; import { useSettingStoreHook } from "/@/store/modules/settings"; +import { useMultiTagsStore } from "/@/store/modules/multiTags"; import navbar from "./components/navbar.vue"; import tag from "./components/tag/index.vue"; @@ -32,7 +33,10 @@ const instance = getCurrentInstance().appContext.app.config.globalProperties; // 清空缓存后从serverConfig.json读取默认配置并赋值到storage中 const layout = computed(() => { // 路由 - if (!instance.$storage.tags || instance.$storage.tags.length === 0) { + if ( + useMultiTagsStore().multiTagsCache && + (!instance.$storage.tags || instance.$storage.tags.length === 0) + ) { // eslint-disable-next-line vue/no-side-effects-in-computed-properties instance.$storage.tags = routerArrays; } diff --git a/src/router/index.ts b/src/router/index.ts index dbc0fd870..1bce6eaa4 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -231,9 +231,10 @@ router.beforeEach((to, _from, next) => { // 刷新 if (usePermissionStoreHook().wholeRoutes.length === 0) initRouter(name.username).then((router: Router) => { - useMultiTagsStoreHook().getMultiTagsCache - ? router.push(to.path) - : router.push("/"); + if (!useMultiTagsStoreHook().getMultiTagsCache) { + return router.push("/"); + } + router.push(to.path); // 刷新页面更新标签栏与页面路由匹配 const localRoutes = storageLocal.getItem("responsive-tags"); const optionsRoutes = router.options?.routes; diff --git a/src/utils/storage/responsive.ts b/src/utils/storage/responsive.ts index 3caa1b4cc..bc251b718 100644 --- a/src/utils/storage/responsive.ts +++ b/src/utils/storage/responsive.ts @@ -3,45 +3,53 @@ import { App } from "vue"; import Storage from "responsive-storage"; export const injectResponsiveStorage = (app: App, config: ServerConfigs) => { - app.use(Storage, { - // 默认显示首页tag - tags: { - type: Array, - default: Storage.getData(undefined, "tags") ?? [ - { - path: "/welcome", - parentPath: "/", - meta: { - title: "message.hshome", - i18n: true, - icon: "HomeFilled", - showLink: true + const configObj = Object.assign( + { + // 国际化 默认中文zh + locale: { + type: Object, + default: Storage.getData(undefined, "locale") ?? { + locale: config.Locale ?? "zh" + } + }, + // layout模式以及主题 + layout: { + type: Object, + default: Storage.getData(undefined, "layout") ?? { + layout: config.Layout ?? "vertical", + theme: config.Theme ?? "default" + } + }, + sets: { + type: Object, + default: Storage.getData(undefined, "sets") ?? { + grey: config.Grey ?? false, + weak: config.Weak ?? false, + hideTabs: config.HideTabs ?? false + } + } + }, + config.MultiTagsCache + ? { + // 默认显示首页tag + tags: { + type: Array, + default: Storage.getData(undefined, "tags") ?? [ + { + path: "/welcome", + parentPath: "/", + meta: { + title: "message.hshome", + i18n: true, + icon: "HomeFilled", + showLink: true + } + } + ] } } - ] - }, - // 国际化 默认中文zh - locale: { - type: Object, - default: Storage.getData(undefined, "locale") ?? { - locale: config.Locale ?? "zh" - } - }, - // layout模式以及主题 - layout: { - type: Object, - default: Storage.getData(undefined, "layout") ?? { - layout: config.Layout ?? "vertical", - theme: config.Theme ?? "default" - } - }, - sets: { - type: Object, - default: Storage.getData(undefined, "sets") ?? { - grey: config.Grey ?? false, - weak: config.Weak ?? false, - hideTabs: config.HideTabs ?? false - } - } - }); + : {} + ); + + app.use(Storage, configObj); };