feat(projects): cache tabs

src/store/modules/app/index.ts

@@ -1,12 +1,17 @@
 import { ref, watch, effectScope, onScopeDispose } from 'vue';
 import { defineStore } from 'pinia';
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+import { breakpointsTailwind, useBreakpoints, useTitle } from '@vueuse/core';
 import { useBoolean } from '@sa/hooks';
 import { SetupStoreId } from '@/enum';
-import { setLocale } from '@/locales';
+import { router } from '@/router';
+import { $t, setLocale } from '@/locales';
 import { localStg } from '@/utils/storage';
+import { useRouteStore } from '../route';
+import { useTabStore } from '../tab';
 
 export const useAppStore = defineStore(SetupStoreId.App, () => {
+  const routeStore = useRouteStore();
+  const tabStore = useTabStore();
   const scope = effectScope();
   const { bool: themeDrawerVisible, setTrue: openThemeDrawer, setFalse: closeThemeDrawer } = useBoolean();
   const { bool: reloadFlag, setBool: setReloadFlag } = useBoolean(true);
@@ -52,8 +57,20 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
 
   const isMobile = breakpoints.smaller('sm');
 
+  /**
+   * update document title by locale
+   */
+  function updateDocumentTitleByLocale() {
+    const { i18nKey, title } = router.currentRoute.value.meta;
+
+    const documentTitle = i18nKey ? $t(i18nKey) : title;
+
+    useTitle(documentTitle);
+  }
+
   // watch store
   scope.run(() => {
+    // watch isMobile, if is mobile, collapse sider
     watch(
       isMobile,
       newValue => {
@@ -63,6 +80,13 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
       },
       { immediate: true }
     );
+
+    // watch locale
+    watch(locale, () => {
+      updateDocumentTitleByLocale();
+      routeStore.updateGlobalMenusByLocale();
+      tabStore.updateTabsByLocale();
+    });
   });
 
   /**

src/store/modules/route/index.ts

@@ -1,4 +1,4 @@
-import { ref, watch, effectScope, onScopeDispose, computed } from 'vue';
+import { ref, computed } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useBoolean } from '@sa/hooks';
@@ -25,7 +25,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   const appStore = useAppStore();
   const authStore = useAuthStore();
   const tabStore = useTabStore();
-  const scope = effectScope();
   const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
 
   /**
@@ -61,9 +60,9 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   }
 
   /**
-   * refresh locale of global menus
+   * update global menus by locale
    */
-  function refreshLocaleOfGlobalMenus() {
+  function updateGlobalMenusByLocale() {
     menus.value = updateLocaleOfGlobalMenus(menus.value);
   }
 
@@ -249,28 +248,11 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
   }
 
-  // watch store
-  scope.run(() => {
-    // update menus when locale changed
-    watch(
-      () => appStore.locale,
-      () => {
-        refreshLocaleOfGlobalMenus();
-      }
-    );
-  });
-
-  /**
-   * on scope dispose
-   */
-  onScopeDispose(() => {
-    scope.stop();
-  });
-
   return {
     resetStore,
     routeHome,
     menus,
+    updateGlobalMenusByLocale,
     cacheRoutes,
     reCacheRoutesByKey,
     reCacheRoutesByKeys,

src/store/modules/tab/index.ts

@@ -1,6 +1,7 @@
-import { computed, ref, watch, effectScope, onScopeDispose } from 'vue';
+import { computed, ref } from 'vue';
 import type { Router } from 'vue-router';
 import { defineStore } from 'pinia';
+import { useEventListener } from '@vueuse/core';
 import { SetupStoreId } from '@/enum';
 import {
   getAllTabs,
@@ -14,11 +15,9 @@ import {
   updateTabByI18nKey
 } from './shared';
 import { useRouterPush } from '@/hooks/common/router';
-import { useAppStore } from '../app';
+import { localStg } from '@/utils/storage';
 
 export const useTabStore = defineStore(SetupStoreId.Tab, () => {
-  const appStore = useAppStore();
-  const scope = effectScope();
   const { routerPush } = useRouterPush(false);
 
   /**
@@ -62,6 +61,12 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
    * @param currentRoute current route
    */
   function initTabStore(currentRoute: App.Global.TabRoute) {
+    const storageTabs = localStg.get('globalTabs');
+
+    if (storageTabs) {
+      tabs.value = storageTabs;
+    }
+
     addTab(currentRoute);
   }
 
@@ -214,32 +219,23 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
   }
 
   /**
-   * update all tabs by i18n key
+   * update tabs by locale
    */
-  function updateAllTabsByI18nKey() {
+  function updateTabsByLocale() {
     tabs.value = updateTabsByI18nKey(tabs.value);
 
     if (homeTab.value) {
       homeTab.value = updateTabByI18nKey(homeTab.value);
     }
   }
 
-  // watch store
-  scope.run(() => {
-    // update menus when locale changed
-    watch(
-      () => appStore.locale,
-      () => {
-        updateAllTabsByI18nKey();
-      }
-    );
-  });
+  function cacheTabs() {
+    localStg.set('globalTabs', tabs.value);
+  }
 
-  /**
-   * on scope dispose
-   */
-  onScopeDispose(() => {
-    scope.stop();
+  // cache tabs when page is closed or refreshed
+  useEventListener(window, 'beforeunload', () => {
+    cacheTabs();
   });
 
   return {
@@ -258,6 +254,7 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
     switchRouteByTab,
     setTabLabel,
     resetTabLabel,
-    isTabRetain
+    isTabRetain,
+    updateTabsByLocale
   };
 });

src/typings/storage.d.ts

@@ -30,5 +30,9 @@ declare namespace StorageType {
      * the user info
      */
     userInfo: Api.Auth.UserInfo;
+    /**
+     * the global tabs
+     */
+    globalTabs: App.Global.Tab[];
   }
 }