refactor: 优化pinia setup store组合式函数写法

Former-commit-id: 27347ede51d0952d3422c3a6c3a86652f91e5639

src/store/modules/user.ts

@@ -1,103 +1,101 @@
 import { defineStore } from 'pinia';
-import { UserState } from './types';
 
-import { localStorage } from '@/utils/storage';
+import { getToken, setToken, removeToken } from '@/utils/auth';
 import { loginApi, logoutApi } from '@/api/auth';
 import { getUserInfo } from '@/api/user';
 import { resetRouter } from '@/router';
-import { LoginForm } from '@/api/auth/types';
+import { store } from '@/store';
+import { LoginData } from '@/api/auth/types';
+import { ref } from 'vue';
+import { UserInfo } from '@/api/user/types';
 
-const useUserStore = defineStore({
-  id: 'user',
-  state: (): UserState => ({
-    token: localStorage.get('token') || '',
-    nickname: '',
-    avatar: '',
-    roles: [],
-    perms: []
-  }),
-  actions: {
-    async RESET_STATE() {
-      this.$reset();
-    },
-    /**
-     * 登录
-     */
-    login(data: LoginForm) {
-      const { username, password } = data;
-      return new Promise((resolve, reject) => {
-        loginApi({
-          grant_type: 'password',
-          username: username.trim(),
-          password: password
+export const useUserStore = defineStore('user', () => {
+  // state
+  const token = ref<string>(getToken() || '');
+  const nickname = ref<string>('');
+  const avatar = ref<string>('');
+  const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
+  const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
+
+  // auctions
+
+  // 登录
+  function login(loginData: LoginData) {
+    return new Promise<void>((resolve, reject) => {
+      loginApi(loginData)
+        .then(response => {
+          const { accessToken } = response.data;
+          token.value = accessToken;
+          setToken(accessToken);
+          resolve();
         })
-          .then(response => {
-            console.log('response.data', response.data);
-            const accessToken = response.data;
-            localStorage.set('token', accessToken);
-            this.token = accessToken;
-            resolve(accessToken);
-          })
-          .catch(error => {
-            reject(error);
-          });
-      });
-    },
-    /**
-     *  获取用户信息（昵称、头像、角色集合、权限集合）
-     */
-    getUserInfo() {
-      return new Promise((resolve, reject) => {
-        getUserInfo()
-          .then(({ data }) => {
-            if (!data) {
-              return reject('Verification failed, please Login again.');
-            }
-            const { nickname, avatar, roles, perms } = data;
-            if (!roles || roles.length <= 0) {
-              reject('getUserInfo: roles must be a non-null array!');
-            }
-            this.nickname = nickname;
-            this.avatar = avatar;
-            this.roles = roles;
-            this.perms = perms;
-            resolve(data);
-          })
-          .catch(error => {
-            reject(error);
-          });
-      });
-    },
-
-    /**
-     *  注销
-     */
-    logout() {
-      return new Promise((resolve, reject) => {
-        logoutApi()
-          .then(() => {
-            localStorage.remove('token');
-            this.RESET_STATE();
-            resetRouter();
-            resolve(null);
-          })
-          .catch(error => {
-            reject(error);
-          });
-      });
-    },
-
-    /**
-     * 清除 Token
-     */
-    resetToken() {
-      return new Promise(resolve => {
-        localStorage.remove('token');
-        this.RESET_STATE();
-        resolve(null);
-      });
-    }
+        .catch(error => {
+          reject(error);
+        });
+    });
   }
+
+  // 获取信息(用户昵称、头像、角色集合、权限集合)
+  function getInfo() {
+    return new Promise<UserInfo>((resolve, reject) => {
+      getUserInfo()
+        .then(({ data }) => {
+          if (!data) {
+            return reject('Verification failed, please Login again.');
+          }
+          if (!data.roles || data.roles.length <= 0) {
+            reject('getUserInfo: roles must be a non-null array!');
+          }
+          nickname.value = data.nickname;
+          avatar.value = data.avatar;
+          roles.value = data.roles;
+          perms.value = data.perms;
+          resolve(data);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+
+  // 注销
+  function logout() {
+    return new Promise<void>((resolve, reject) => {
+      logoutApi()
+        .then(() => {
+          resetRouter();
+          resetToken();
+          resolve();
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+
+  // 重置
+  function resetToken() {
+    removeToken();
+    token.value = '';
+    nickname.value = '';
+    avatar.value = '';
+    roles.value = [];
+    perms.value = [];
+  }
+  return {
+    token,
+    nickname,
+    avatar,
+    roles,
+    perms,
+    login,
+    getInfo,
+    logout,
+    resetToken
+  };
 });
 
-export default useUserStore;
+// 非setup
+export function useUserStoreHook() {
+  return useUserStore(store);
+}