perf: 使用组合式 store

package.json

@@ -50,11 +50,11 @@
     "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-4010920240607001",
     "@dcloudio/uni-mp-weixin": "3.0.0-alpha-4010920240607001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4010920240607001",
-    "alova": "^2.21.2",
+    "alova": "^2.21.3",
     "crypto-js": "^4.2.0",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.7",
-    "vue": "^3.4.27"
+    "vue": "^3.4.29"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.21.1",
@@ -69,7 +69,7 @@
     "@types/node": "^20.14.2",
     "@unocss/eslint-plugin": "^0.61.0",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/runtime-core": "^3.4.27",
+    "@vue/runtime-core": "^3.4.29",
     "eslint": "^9.4.0",
     "eslint-plugin-format": "^0.1.1",
     "globals": "^15.4.0",
@@ -85,7 +85,7 @@
     "unocss": "^0.61.0",
     "unocss-preset-weapp": "^0.60.1",
     "unplugin-transform-class": "^0.5.3",
-    "vite": "^5.3.0",
+    "vite": "^5.3.1",
     "vite-plugin-restart": "^0.4.0"
   },
   "simple-git-hooks": {

src/pages/login/index.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useRequest } from 'alova';
 import { useRouter } from 'uni-mini-router';
 import { reactive, ref, unref } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
 import { omit } from 'lodash-es';
-import { useAuthStore } from '@/stores/modules/auth';
-import { login } from '@/services/api/auth';
+import { useUserStore } from '@/stores/modules/user';
 import { Toast } from '@/utils/uniapi/prompt';
 
 const pageQuery = ref<Record<string, any> | undefined>(undefined);
@@ -19,12 +17,12 @@ const form = reactive({
   email: 'uni-app@test.com',
   password: 'Vue3_Ts_Vite',
 });
-const authStore = useAuthStore();
-const { send: sendLogin } = useRequest(login, { immediate: false });
+const userStore = useUserStore();
+
 function submit(e: any) {
-  sendLogin(e.detail.value).then((res) => {
+  console.log('====>userStore', userStore.user, userStore);
+  userStore.login(e.detail.value).then(() => {
     Toast('登录成功', { duration: 1500 });
-    authStore.setToken(res.token);
     setTimeout(() => {
       if (unref(pageQuery)?.redirect) {
         // 如果有存在redirect(重定向)参数，登录成功后直接跳转

src/stores/modules/auth.ts

@@ -1,56 +1,69 @@
 import { defineStore } from 'pinia';
+import { useRequest } from 'alova';
+import { computed, ref } from 'vue';
 import { getCache, removeCache, setCache } from '@/utils/cache';
 import { TOKEN_KEY } from '@/enums/cacheEnum';
+import { login as loginApi, logout as logoutApi } from '@/services/api/auth';
 
-// import { logout } from '@/services/api/auth';
+const authenticationScheme = 'Bearer';
 
-interface AuthState {
-  token?: string | null
-}
+export const useAuthStore = defineStore('AuthStore', () => {
+  const token = ref<string | null>(null);
 
-export const useAuthStore = defineStore({
-  id: 'auth',
-  state: (): AuthState => ({
-    token: null,
-  }),
-  getters: {
-    getToken: state => state.token,
-    isLogin: (state): boolean => !!state.token,
-    getAuthorization: (state) => {
-      return state.token ? { authorization: `Bearer ${state.token}` } : {};
-    },
-  },
-  actions: {
-    initToken() {
-      this.token = getCache<string>(TOKEN_KEY) || null;
-    },
-    setToken(token: string | null) {
-      setCache(TOKEN_KEY, token);
-      this.token = token;
-    },
-    /**
-     * @description 登出
-     */
-    async loginOut(): Promise<any> {
-      try {
-        // await logout();
-        removeCache(TOKEN_KEY);
-        this.setToken(null);
-      } catch (err: any) {
-        console.error(err);
-      }
-    },
-    /**
-     * @description 刷新token
-     */
-    // async refreshToken(): Promise<LoginModel> {
-    //     try {
-    //         const { data } = await refreshToken();
-    //         this.setToken(data.token);
-    //         return Promise.resolve(data);
-    //     } catch (err: any) {
-    //         return Promise.reject(err);
-    //     }
-    // },
-  },
+  const initToken = () => {
+    token.value = getCache<string>(TOKEN_KEY) || null;
+  };
+
+  function setToken(value: string | null) {
+    setCache(TOKEN_KEY, value);
+    token.value = value;
+  }
+
+  const getAuthorization = computed(() => {
+    return token.value ? `${authenticationScheme} ${token.value}` : '';
+  });
+
+  // 登录
+  const { send: sendLogin } = useRequest(loginApi, { immediate: false });
+  const login = async (params: LoginParams) => {
+    try {
+      const res = await sendLogin(params);
+      setToken(res.token);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  // 登出
+  const { send: sendLogout } = useRequest(logoutApi, { immediate: false });
+  async function logout() {
+    try {
+      await sendLogout();
+      removeCache(TOKEN_KEY);
+      token.value = null;
+    } catch (err: any) {
+      console.error(err);
+    }
+  }
+
+  // 刷新token
+  async function refreshToken() {
+    try {
+      // const res = await refreshToken();
+      // setToken(res.data.access_token);
+      // return res.data;
+    } catch (err: any) {
+      console.error(err);
+    }
+  }
+
+  return {
+    token,
+    initToken,
+    setToken,
+    getAuthorization,
+    login,
+    logout,
+    refreshToken,
+  };
 });

src/stores/modules/user.ts

@@ -1,12 +1,25 @@
 import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useAuthStore } from './auth';
 
 interface UserState {
   id?: string | number
 }
 
-export const useUserStore = defineStore({
-  id: 'user',
-  state: (): UserState => ({}),
-  getters: {},
-  actions: {},
+export const useUserStore = defineStore('UserStore', () => {
+  const user = ref<UserState>({});
+
+  const authStore = useAuthStore();
+  async function login(params: LoginParams) {
+    try {
+      await authStore.login(params);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return {
+    user,
+    login,
+  };
 });

tsconfig.json

@@ -54,7 +54,8 @@
     "src/**/*.vue",
     "vite.config.*",
     "typings/*.ts",
-    "typings/*.d.ts"
+    "typings/*.d.ts",
+    "node_modules/.pnpm/unplugin-auto-import@0.16.7_rollup@4.18.0/node_modules/unplugin-auto-import/auto-imports.d.ts"
   ], // 指定要包含在编译中的文件匹配列表
   "exclude": []
 }