refactor(projects): new storage system [新的本地数据存储系统]

src/store/modules/auth/helpers.ts

@@ -0,0 +1,25 @@
+import { localStg } from '@/utils';
+
+/** 获取token */
+export function getToken() {
+  return localStg.get('token') || '';
+}
+
+/** 获取用户信息 */
+export function getUserInfo() {
+  const emptyInfo: Auth.UserInfo = {
+    userId: '',
+    userName: '',
+    userRole: 'user'
+  };
+  const userInfo: Auth.UserInfo = localStg.get('userInfo') || emptyInfo;
+
+  return userInfo;
+}
+
+/** 去除用户相关缓存 */
+export function clearAuthStorage() {
+  localStg.remove('token');
+  localStg.remove('refreshToken');
+  localStg.remove('userInfo');
+}

src/store/modules/auth/index.ts

@@ -3,9 +3,10 @@ import { defineStore } from 'pinia';
 import { router } from '@/router';
 import { fetchLogin, fetchUserInfo } from '@/service';
 import { useRouterPush } from '@/composables';
-import { clearAuthStorage, getToken, getUserInfo, setRefreshToken, setToken, setUserInfo } from '@/utils';
+import { localStg } from '@/utils';
 import { useTabStore } from '../tab';
 import { useRouteStore } from '../route';
+import { getToken, getUserInfo, clearAuthStorage } from './helpers';
 
 interface AuthState {
   /** 用户信息 */
@@ -81,14 +82,14 @@ export const useAuthStore = defineStore('auth-store', {
 
       // 先把token存储到缓存中(后面接口的请求头需要token)
       const { token, refreshToken } = backendToken;
-      setToken(token);
-      setRefreshToken(refreshToken);
+      localStg.set('token', token);
+      localStg.set('refreshToken', refreshToken);
 
       // 获取用户信息
       const { data } = await fetchUserInfo();
       if (data) {
         // 成功后把用户信息存储到缓存中
-        setUserInfo(data);
+        localStg.set('userInfo', data);
 
         // 更新状态
         this.userInfo = data;

src/store/modules/route/index.ts

@@ -2,10 +2,10 @@ import { defineStore } from 'pinia';
 import { ROOT_ROUTE, constantRoutes, router, routes as staticRoutes } from '@/router';
 import { fetchUserRoutes } from '@/service';
 import {
+  localStg,
   filterAuthRoutesByUserPermission,
   getCacheRoutes,
   getConstantRouteNames,
-  getUserInfo,
   transformAuthRouteToVueRoutes,
   transformAuthRouteToVueRoute,
   transformAuthRouteToMenu,
@@ -106,7 +106,12 @@ export const useRouteStore = defineStore('route-store', {
     },
     /** 初始化动态路由 */
     async initDynamicRoute() {
-      const { userId } = getUserInfo();
+      const { userId } = localStg.get('userInfo') || {};
+
+      if (!userId) {
+        throw new Error('userId 不能为空!');
+      }
+
       const { data } = await fetchUserRoutes(userId);
       if (data) {
         this.routeHomeName = data.home;
@@ -123,9 +128,6 @@ export const useRouteStore = defineStore('route-store', {
     /** 初始化权限路由 */
     async initAuthRoute() {
       const { initHomeTab } = useTabStore();
-      const { userId } = getUserInfo();
-
-      if (!userId) return;
 
       const isDynamicRoute = this.authRouteMode === 'dynamic';
       if (isDynamicRoute) {

src/store/modules/tab/helpers.ts

@@ -1,6 +1,5 @@
 import type { RouteLocationNormalizedLoaded, RouteRecordNormalized } from 'vue-router';
-import { EnumStorageKey } from '@/enum';
-import { getLocal, setLocal } from '@/utils';
+import { localStg } from '@/utils';
 
 /**
  * 根据vue路由获取tab路由
@@ -58,15 +57,10 @@ function hasFullPath(
   return Boolean((route as RouteLocationNormalizedLoaded).fullPath);
 }
 
-/** 缓存多页签数据 */
-export function setTabRoutes(data: App.GlobalTabRoute[]) {
-  setLocal(EnumStorageKey['multi-tab-routes'], data);
-}
-
 /** 获取缓存的多页签数据 */
 export function getTabRoutes() {
   const routes: App.GlobalTabRoute[] = [];
-  const data = getLocal<App.GlobalTabRoute[]>(EnumStorageKey['multi-tab-routes']);
+  const data = localStg.get('multiTabRoutes');
   if (data) {
     const defaultTabRoutes = data.map(item => ({
       ...item,
@@ -82,5 +76,5 @@ export function getTabRoutes() {
 
 /** 清空多页签数据 */
 export function clearTabRoutes() {
-  setTabRoutes([]);
+  localStg.set('multiTabRoutes', []);
 }

src/store/modules/tab/index.ts

@@ -1,6 +1,7 @@
 import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useRouterPush } from '@/composables';
+import { localStg } from '@/utils';
 import { useThemeStore } from '../theme';
 import {
   clearTabRoutes,
@@ -8,8 +9,7 @@ import {
   getIndexInTabRoutesByRouteName,
   getTabRouteByVueRoute,
   getTabRoutes,
-  isInTabRoutes,
-  setTabRoutes
+  isInTabRoutes
 } from './helpers';
 
 interface TabState {
@@ -52,7 +52,7 @@ export const useTabStore = defineStore('tab-store', {
     },
     /** 缓存页签路由数据 */
     cacheTabRoutes() {
-      setTabRoutes(this.tabs);
+      localStg.set('multiTabRoutes', this.tabs);
     },
     /**
      * 设置当前路由对应的页签为激活状态

src/store/modules/theme/helpers.ts

@@ -1,19 +1,18 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { cloneDeep } from 'lodash-es';
 import { themeSetting } from '@/settings';
-import { EnumStorageKey } from '@/enum';
-import { addColorAlpha, getColorPalette, getLocal, getThemeColor, removeLocal, setLocal } from '@/utils';
+import { localStg, addColorAlpha, getColorPalette } from '@/utils';
 
 /** 初始化主题配置 */
 export function initThemeSettings() {
   const isProd = import.meta.env.PROD;
   // 生产环境才缓存主题配置，本地开发实时调整配置更改配置的json
-  const storageSettings = getThemeSettings();
+  const storageSettings = localStg.get('themeSettings');
   if (isProd && storageSettings) {
     return storageSettings;
   }
 
-  const themeColor = getThemeColor() || themeSetting.themeColor;
+  const themeColor = localStg.get('themeColor') || themeSetting.themeColor;
   const info = themeSetting.isCustomizeInfoColor ? themeSetting.otherColor.info : getColorPalette(themeColor, 7);
   const otherColor = { ...themeSetting.otherColor, info };
   const setting = cloneDeep({ ...themeSetting, themeColor, otherColor });
@@ -78,18 +77,3 @@ export function getNaiveThemeOverrides(colors: Record<ColorType, string>): Globa
     }
   };
 }
-
-/** 获取缓存中的主题配置 */
-function getThemeSettings() {
-  return getLocal<Theme.Setting>(EnumStorageKey['theme-settings']);
-}
-
-/** 获取缓存中的主题配置 */
-export function setThemeSettings(settings: Theme.Setting) {
-  return setLocal(EnumStorageKey['theme-settings'], settings);
-}
-
-/** 清除缓存配置 */
-export function clearThemeSettings() {
-  removeLocal(EnumStorageKey['theme-settings']);
-}

src/store/modules/theme/index.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { darkTheme } from 'naive-ui';
-import { clearThemeSettings, getNaiveThemeOverrides, initThemeSettings, setThemeSettings } from './helpers';
+import { localStg } from '@/utils';
+import { getNaiveThemeOverrides, initThemeSettings } from './helpers';
 
 type ThemeState = Theme.Setting;
 
@@ -24,14 +25,14 @@ export const useThemeStore = defineStore('theme-store', {
   actions: {
     /** 重置theme状态 */
     resetThemeStore() {
-      clearThemeSettings();
+      localStg.remove('themeSettings');
       this.$reset();
     },
     /** 缓存主题配置 */
     cacheThemeSettings() {
       const isProd = import.meta.env.PROD;
       if (isProd) {
-        setThemeSettings(this.$state);
+        localStg.set('themeSettings', this.$state);
       }
     },
     /** 设置暗黑模式 */

src/store/subscribe/theme.ts

@@ -3,7 +3,7 @@ import { useOsTheme } from 'naive-ui';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
 import { kebabCase } from 'lodash-es';
-import { setThemeColor } from '@/utils';
+import { localStg } from '@/utils';
 import { useThemeStore } from '../modules';
 
 /** 订阅theme store */
@@ -17,7 +17,7 @@ export default function subscribeThemeStore() {
   const stopThemeColor = watch(
     () => theme.themeColor,
     newValue => {
-      setThemeColor(newValue);
+      localStg.set('themeColor', newValue);
     },
     { immediate: true }
   );