refactor: 代码重构优化(VueUse使用)

Former-commit-id: f33b8d352dd9e9b2a706c94cdd7afa150ac12931

src/store/modules/app.ts

@@ -1,38 +1,21 @@
-import {
-  getSidebarStatus,
-  setSidebarStatus,
-  getSize,
-  setSize,
-  setLanguage
-} from '@/utils/localStorage';
 import { defineStore } from 'pinia';
-import { getLanguage } from '@/lang/index';
-import { computed, reactive, ref } from 'vue';
 import { useStorage } from '@vueuse/core';
+import defaultSettings from '@/settings';
 
 // Element Plus 语言包
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import en from 'element-plus/es/locale/lang/en';
 
-export enum DeviceType {
-  mobile,
-  desktop
-}
-
-export enum SizeType {
-  default,
-  large,
-  small
-}
-
 // setup
 export const useAppStore = defineStore('app', () => {
   // state
-  const device = useStorage<string>('device', 'desktop');
-  const size = ref(getSize() || 'default');
-  const language = ref(getLanguage());
+  const device = useStorage('device', 'desktop');
+  const size = useStorage('size', defaultSettings.size);
+  const language = useStorage('language', defaultSettings.language);
+
+  const sidebarStatus = useStorage('sidebarStatus', 'closed');
   const sidebar = reactive({
-    opened: getSidebarStatus() !== 'closed',
+    opened: sidebarStatus.value !== 'closed',
     withoutAnimation: false
   });
 
@@ -49,22 +32,22 @@ export const useAppStore = defineStore('app', () => {
     sidebar.opened = !sidebar.opened;
     sidebar.withoutAnimation = withoutAnimation;
     if (sidebar.opened) {
-      setSidebarStatus('opened');
+      sidebarStatus.value = 'opened';
     } else {
-      setSidebarStatus('closed');
+      sidebarStatus.value = 'closed';
     }
   }
 
   function closeSideBar(withoutAnimation: boolean) {
     sidebar.opened = false;
     sidebar.withoutAnimation = withoutAnimation;
-    setSidebarStatus('closed');
+    sidebarStatus.value = 'closed';
   }
 
   function openSideBar(withoutAnimation: boolean) {
     sidebar.opened = true;
     sidebar.withoutAnimation = withoutAnimation;
-    setSidebarStatus('opened');
+    sidebarStatus.value = 'opened';
   }
 
   function toggleDevice(val: string) {
@@ -73,12 +56,10 @@ export const useAppStore = defineStore('app', () => {
 
   function changeSize(val: string) {
     size.value = val;
-    setSize(val);
   }
 
   function changeLanguage(val: string) {
     language.value = val;
-    setLanguage(val);
   }
 
   return {

src/store/modules/settings.ts

@@ -1,32 +1,14 @@
 import { defineStore } from 'pinia';
-import defaultSettings from '../../settings';
-import { ref } from 'vue';
+import defaultSettings from '@/settings';
 import { useStorage } from '@vueuse/core';
 
-/**
- * 主题类型
- */
-export enum ThemeType {
-  light,
-  dark
-}
-
-/**
- * 布局类型
- */
-export enum LayoutType {
-  left,
-  top,
-  mix
-}
-
 export const useSettingsStore = defineStore('setting', () => {
   // state
-  const showSettings = ref<boolean>(defaultSettings.showSettings);
   const tagsView = useStorage<boolean>('tagsView', defaultSettings.tagsView);
+
+  const showSettings = ref<boolean>(defaultSettings.showSettings);
   const fixedHeader = ref<boolean>(defaultSettings.fixedHeader);
   const sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo);
-  const theme = useStorage('vueuse-color-scheme', defaultSettings.theme);
 
   const layout = useStorage<string>('layout', defaultSettings.layout);
 

src/store/modules/user.ts

@@ -1,37 +1,35 @@
 import { defineStore } from 'pinia';
 
-import { getToken, setToken, removeToken } from '@/utils/auth';
 import { loginApi, logoutApi } from '@/api/auth';
 import { getUserInfo } from '@/api/user';
 import { resetRouter } from '@/router';
 import { store } from '@/store';
-import { ILoginData } from '@/api/auth/types';
-import { ref } from 'vue';
+
+import { LoginData } from '@/api/auth/types';
 import { UserInfo } from '@/api/user/types';
 
+import { useStorage } from '@vueuse/core';
+
 export const useUserStore = defineStore('user', () => {
   // state
-  const token = ref<string>(getToken() || '');
+  const token = useStorage('accessToken', '');
   const nickname = ref<string>('');
   const avatar = ref<string>('');
   const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
   const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
 
-  // actions
-
   /**
    * 登录
    *
    * @param loginData
    * @returns
    */
-  function login(loginData: ILoginData) {
+  function login(loginData: LoginData) {
     return new Promise<void>((resolve, reject) => {
       loginApi(loginData)
         .then(response => {
           const { accessToken } = response.data;
           token.value = accessToken;
-          setToken(accessToken);
           resolve();
         })
         .catch(error => {
@@ -80,7 +78,6 @@ export const useUserStore = defineStore('user', () => {
 
   // 重置
   function resetToken() {
-    removeToken();
     token.value = '';
     nickname.value = '';
     avatar.value = '';