refactor: refactor store

src/router/constant.ts

@@ -20,13 +20,3 @@ export const getParentLayout = (_name?: string) => {
       });
     });
 };
-
-// export const getParentLayout = (name: string) => {
-//   return () =>
-//     new Promise((resolve) => {
-//       resolve({
-//         ...ParentLayout,
-//         name,
-//       });
-//     });
-// };

src/router/guard/index.ts

@@ -9,11 +9,13 @@ import { createHttpGuard } from './httpGuard';
 import { createPageGuard } from './pageGuard';
 import { createStateGuard } from './stateGuard';
 
-createPageGuard(router);
-createPageLoadingGuard(router);
-createHttpGuard(router);
-createScrollGuard(router);
-createMessageGuard(router);
-createProgressGuard(router);
-createPermissionGuard(router);
-createStateGuard(router);
+export function setupRouterGuard() {
+  createPageGuard(router);
+  createPageLoadingGuard(router);
+  createHttpGuard(router);
+  createScrollGuard(router);
+  createMessageGuard(router);
+  createProgressGuard(router);
+  createPermissionGuard(router);
+  createStateGuard(router);
+}

src/router/guard/pageLoadingGuard.ts

@@ -1,13 +1,15 @@
 import type { Router } from 'vue-router';
-import { appStore } from '/@/store/modules/app';
-import { userStore } from '/@/store/modules/user';
+import { useAppStoreWidthOut } from '/@/store/modules/app';
+import { useUserStoreWidthOut } from '/@/store/modules/user';
 import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
 import { unref } from 'vue';
 
-const { getOpenPageLoading } = useTransitionSetting();
 export function createPageLoadingGuard(router: Router) {
+  const userStore = useUserStoreWidthOut();
+  const appStore = useAppStoreWidthOut();
+  const { getOpenPageLoading } = useTransitionSetting();
   router.beforeEach(async (to) => {
-    if (!userStore.getTokenState) {
+    if (!userStore.getToken) {
       return true;
     }
     if (to.meta.loaded) {
@@ -24,7 +26,7 @@ export function createPageLoadingGuard(router: Router) {
   router.afterEach(async () => {
     if (unref(getOpenPageLoading)) {
       setTimeout(() => {
-        appStore.commitPageLoadingState(false);
+        appStore.setPageLoading(false);
       }, 220);
     }
     return true;

src/router/guard/permissionGuard.ts

@@ -1,9 +1,9 @@
 import type { Router, RouteRecordRaw } from 'vue-router';
 
-import { permissionStore } from '/@/store/modules/permission';
+import { usePermissionStoreWidthOut } from '/@/store/modules/permission';
 
 import { PageEnum } from '/@/enums/pageEnum';
-import { userStore } from '/@/store/modules/user';
+import { useUserStoreWidthOut } from '/@/store/modules/user';
 
 import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 
@@ -12,6 +12,8 @@ const LOGIN_PATH = PageEnum.BASE_LOGIN;
 const whitePathList: PageEnum[] = [LOGIN_PATH];
 
 export function createPermissionGuard(router: Router) {
+  const userStore = useUserStoreWidthOut();
+  const permissionStore = usePermissionStoreWidthOut();
   router.beforeEach(async (to, from, next) => {
     // Jump to the 404 page after processing the login
     if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_ROUTE.name) {
@@ -25,7 +27,7 @@ export function createPermissionGuard(router: Router) {
       return;
     }
 
-    const token = userStore.getTokenState;
+    const token = userStore.getToken;
 
     // token does not exist
     if (!token) {
@@ -51,7 +53,7 @@ export function createPermissionGuard(router: Router) {
       next(redirectData);
       return;
     }
-    if (permissionStore.getIsDynamicAddedRouteState) {
+    if (permissionStore.getIsDynamicAddedRoute) {
       next();
       return;
     }
@@ -64,7 +66,7 @@ export function createPermissionGuard(router: Router) {
     const redirectPath = (from.query.redirect || to.path) as string;
     const redirect = decodeURIComponent(redirectPath);
     const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
-    permissionStore.commitDynamicAddedRouteState(true);
+    permissionStore.setDynamicAddedRoute(true);
     next(nextData);
   });
 }

src/router/guard/progressGuard.ts

@@ -6,9 +6,8 @@ import nProgress from 'nprogress';
 
 import { unref } from 'vue';
 
-const { getOpenNProgress } = useTransitionSetting();
-
 export function createProgressGuard(router: Router) {
+  const { getOpenNProgress } = useTransitionSetting();
   router.beforeEach(async (to) => {
     if (to.meta.loaded) return true;
     unref(getOpenNProgress) && nProgress.start();

src/router/guard/stateGuard.ts

@@ -1,19 +1,23 @@
 import type { Router } from 'vue-router';
-import { appStore } from '/@/store/modules/app';
-import { tabStore } from '/@/store/modules/tab';
-import { userStore } from '/@/store/modules/user';
-import { permissionStore } from '/@/store/modules/permission';
+import { useAppStore } from '/@/store/modules/app';
+import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+import { useUserStore } from '/@/store/modules/user';
+import { usePermissionStore } from '/@/store/modules/permission';
 import { PageEnum } from '/@/enums/pageEnum';
 import { removeTabChangeListener } from '/@/logics/mitt/routeChange';
 
 export function createStateGuard(router: Router) {
   router.afterEach((to) => {
+    const tabStore = useMultipleTabStore();
+    const userStore = useUserStore();
+    const appStore = useAppStore();
+    const permissionStore = usePermissionStore();
     // Just enter the login page and clear the authentication information
     if (to.path === PageEnum.BASE_LOGIN) {
-      appStore.resumeAllState();
-      permissionStore.commitResetState();
-      tabStore.commitResetState();
-      userStore.commitResetState();
+      appStore.resetAllState();
+      permissionStore.resetState();
+      tabStore.resetState();
+      userStore.resetState();
       removeTabChangeListener();
     }
   });

src/router/menus/index.ts

@@ -1,8 +1,8 @@
 import type { Menu, MenuModule } from '/@/router/types';
 import type { RouteRecordNormalized } from 'vue-router';
 
-import { appStore } from '/@/store/modules/app';
-import { permissionStore } from '/@/store/modules/permission';
+import { useAppStoreWidthOut } from '/@/store/modules/app';
+import { usePermissionStore } from '/@/store/modules/permission';
 import { transformMenuModule, getAllParentPath } from '/@/router/helper/menuHelper';
 import { filter } from '/@/utils/helper/treeHelper';
 import { isUrl } from '/@/utils/is';
@@ -24,6 +24,7 @@ Object.keys(modules).forEach((key) => {
 // ==========Helper===========
 // ===========================
 const isBackMode = () => {
+  const appStore = useAppStoreWidthOut();
   return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
 };
 
@@ -39,7 +40,8 @@ const staticMenus: Menu[] = [];
 })();
 
 async function getAsyncMenus() {
-  return !isBackMode() ? staticMenus : permissionStore.getBackMenuListState;
+  const permissionStore = usePermissionStore();
+  return !isBackMode() ? staticMenus : permissionStore.getBackMenuList;
 }
 
 export const getMenus = async (): Promise<Menu[]> => {