diff --git a/mock/role/index.mock.ts b/mock/role/index.mock.ts index cc87336..f8ce84c 100644 --- a/mock/role/index.mock.ts +++ b/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', diff --git a/package.json b/package.json index cec44e3..883f9f1 100644 --- a/package.json +++ b/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", diff --git a/src/hooks/web/usePageLoading.ts b/src/hooks/web/usePageLoading.ts index bb89457..995c941 100644 --- a/src/hooks/web/usePageLoading.ts +++ b/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) } diff --git a/src/hooks/web/useTitle.ts b/src/hooks/web/useTitle.ts index d0eb188..546267d 100644 --- a/src/hooks/web/useTitle.ts +++ b/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 ) diff --git a/src/permission.ts b/src/permission.ts index 67d6ffa..d304587 100644 --- a/src/permission.ts +++ b/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: '/' }) diff --git a/src/store/index.ts b/src/store/index.ts index 735e784..ee92ca8 100644 --- a/src/store/index.ts +++ b/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) => { app.use(store) diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 8e7858c..68b7093 100644 --- a/src/store/modules/app.ts +++ b/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 = () => { diff --git a/src/store/modules/lock.ts b/src/store/modules/lock.ts index da6c220..70ff87f 100644 --- a/src/store/modules/lock.ts +++ b/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 = () => { diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index 48f5a85..92891c1 100644 --- a/src/store/modules/permission.ts +++ b/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 = () => { diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts index 1d608bf..3b2a2de 100644 --- a/src/store/modules/tagsView.ts +++ b/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 = () => {