refactor(projects): 恢复pinia默认写法

src/store/modules/auth/index.ts

@@ -1,112 +1,92 @@
-import { ref, computed, reactive, unref } from 'vue';
-import type { Ref, ComputedRef } from 'vue';
+import { unref } from 'vue';
 import { defineStore } from 'pinia';
 import { router as globalRouter } from '@/router';
 import { useRouterPush } from '@/composables';
-import { useLoading } from '@/hooks';
 import { fetchLogin, fetchUserInfo } from '@/service';
 import { getUserInfo, getToken, setUserInfo, setToken, setRefreshToken, clearAuthStorage } from '@/utils';
 
-interface AuthStore {
+interface AuthState {
   /** 用户信息 */
   userInfo: Auth.UserInfo;
   /** 用户token */
-  token: Ref<string>;
-  /** 是否登录 */
-  isLogin: ComputedRef<boolean>;
-  /**
-   * 重置authStore
-   * 是否需要跳转页面(例如当前页面是需要权限的，登出后需要跳转到登录页面)
-   */
-  resetAuthStore(pushRoute: boolean): void;
+  token: string;
   /** 登录的加载状态 */
-  loginLoding: Ref<boolean>;
-  /**
-   * 登录
-   * @param phone - 手机号
-   * @param pwdOrCode - 密码或验证码
-   * @param type - 登录方式: pwd - 密码登录; sms - 验证码登录
-   */
-  login(phone: string, pwdOrCode: string, type: 'pwd' | 'sms'): void;
+  loginLoding: boolean;
 }
 
-export const useAuthStore = defineStore('auth-store', () => {
-  const { toLogin, toLoginRedirect } = useRouterPush(false);
+export const useAuthStore = defineStore('auth-store', {
+  state: (): AuthState => ({
+    userInfo: getUserInfo(),
+    token: getToken(),
+    loginLoding: false
+  }),
+  getters: {
+    /** 是否登录 */
+    isLogin(state) {
+      return Boolean(state.token);
+    }
+  },
+  actions: {
+    /** 重置auth状态 */
+    resetAuthStore() {
+      const { toLogin } = useRouterPush(false);
+      const route = unref(globalRouter.currentRoute);
 
-  const userInfo: Auth.UserInfo = reactive(getUserInfo());
-  function handleSetUserInfo(data: Auth.UserInfo) {
-    Object.assign(userInfo, data);
-  }
+      clearAuthStorage();
+      this.$reset();
 
-  const token = ref(getToken());
-  function handleSetToken(data: string) {
-    token.value = data;
-  }
+      if (route.meta.requiresAuth) {
+        toLogin();
+      }
+    },
+    /**
+     * 根据token进行登录
+     * @param backendToken - 返回的token
+     */
+    async loginByToken(backendToken: ApiAuth.Token) {
+      const { toLoginRedirect } = useRouterPush(false);
 
-  const isLogin = computed(() => Boolean(token.value));
+      // 先把token存储到缓存中
+      const { token, refreshToken } = backendToken;
+      setToken(token);
+      setRefreshToken(refreshToken);
 
-  const { loading: loginLoding, startLoading: startLoginLoading, endLoading: endLoginLoading } = useLoading();
+      // 获取用户信息
+      const { data } = await fetchUserInfo();
+      if (data) {
+        // 成功后把用户信息存储到缓存中
+        setUserInfo(data);
 
-  function resetStore() {
-    handleSetUserInfo(getUserInfo());
-    handleSetToken(getToken());
-  }
+        // 更新状态
+        Object.assign(this, { userInfo: data, token });
 
-  function resetAuthStore(pushRoute: boolean = true) {
-    const route = unref(globalRouter.currentRoute);
+        // 跳转登录后的地址
+        toLoginRedirect();
 
-    clearAuthStorage();
-    resetStore();
-
-    if (pushRoute && route.meta.requiresAuth) {
-      toLogin();
+        // 登录成功弹出欢迎提示
+        window.$notification?.success({
+          title: '登录成功!',
+          content: `欢迎回来，${data.userName}!`,
+          duration: 3000
+        });
+      } else {
+        // 不成功则重置状态
+        this.resetAuthStore();
+      }
+    },
+    /**
+     * 登录
+     * @param phone - 手机号
+     * @param pwdOrCode - 密码或验证码
+     * @param type - 登录方式: pwd - 密码登录; sms - 验证码登录
+     */
+    async login(phone: string, pwdOrCode: string, type: 'pwd' | 'sms') {
+      this.loginLoding = true;
+      const { data } = await fetchLogin(phone, pwdOrCode, type);
+      if (data) {
+        await this.loginByToken(data);
+      }
+      this.loginLoding = false;
     }
   }
-
-  async function login(phone: string, pwdOrCode: string, type: 'pwd' | 'sms') {
-    startLoginLoading();
-    const { data } = await fetchLogin(phone, pwdOrCode, type);
-    if (data) {
-      await loginByToken(data);
-    }
-    endLoginLoading();
-  }
-
-  async function loginByToken(backendToken: ApiAuth.Token) {
-    // 1.先把token存储到缓存中
-    const { token, refreshToken } = backendToken;
-    setToken(token);
-    setRefreshToken(refreshToken);
-
-    // 2.获取用户信息
-    const { data } = await fetchUserInfo();
-    if (data) {
-      // 成功后把用户信息存储到缓存中
-      setUserInfo(data);
-      handleSetToken(token);
-      handleSetUserInfo(data);
-      // 3. 跳转登录后的地址
-      toLoginRedirect();
-      // 4.登录成功弹出欢迎提示
-      window.$notification?.success({
-        title: '登录成功!',
-        content: `欢迎回来，${userInfo.userName}!`,
-        duration: 3000
-      });
-    } else {
-      // 不成功则重置状态
-      resetAuthStore(false);
-    }
-  }
-
-  const authStore: AuthStore = {
-    userInfo,
-    token,
-    isLogin,
-    resetAuthStore,
-    loginLoding,
-    login
-  };
-
-  return authStore;
 });