refactor axios.

src/shared/api.ts

@@ -1,7 +1,10 @@
+import { useAxios } from "@vueuse/integrations/useAxios"
 import http from "../utils/http"
 
 export function login(data: { username: string; password: string }) {
-  return http.post("login", data)
+  return useAxios("login", { method: "post", data }, http, {
+    immediate: false,
+  })
 }
 
 export function logout() {
@@ -9,7 +12,7 @@ export function logout() {
 }
 
 export function getUserInfo(username: string) {
-  return http.get("profile", {
-    params: { username },
+  return useAxios("profile", { method: "get", params: { username } }, http, {
+    immediate: false,
   })
 }

src/shared/stores/user.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 import {
   PROBLEM_PERMISSION,
   STORAGE_KEY,
@@ -9,8 +9,7 @@ import storage from "../../utils/storage"
 import { getUserInfo } from "../api"
 
 export const useUserStore = defineStore("user", () => {
-  const profile = ref<any>({})
-  const isLoaded = ref(false)
+  const { data: profile, isFinished, execute } = getUserInfo("")
   const user = computed(() => profile.value.user || {})
   const isAuthed = computed(() => !!user.value.email)
   const isAdminRole = computed(
@@ -26,10 +25,7 @@ export const useUserStore = defineStore("user", () => {
   )
 
   async function getMyProfile() {
-    isLoaded.value = false
-    const res = await getUserInfo("")
-    isLoaded.value = true
-    profile.value = res.data || {}
+    await execute()
     storage.set(STORAGE_KEY.AUTHED, !!user.value.email)
   }
 
@@ -39,7 +35,7 @@ export const useUserStore = defineStore("user", () => {
   }
   return {
     profile,
-    isLoaded,
+    isFinished,
     user,
     isAdminRole,
     isSuperAdmin,

src/shared/user/login.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { FormInstance } from "element-plus"
-import { reactive, ref } from "vue"
+import { computed, reactive, ref } from "vue"
 import { useSignupStore } from "../../oj/stores/signup"
 import { login } from "../../shared/api"
 import { useLoginStore } from "../stores/login"
@@ -9,8 +9,6 @@ import { useUserStore } from "../stores/user"
 const loginStore = useLoginStore()
 const signupStore = useSignupStore()
 const userStore = useUserStore()
-const loading = ref(false)
-const errorMessage = ref("")
 const loginRef = ref<FormInstance>()
 const form = reactive({
   username: "",
@@ -23,23 +21,19 @@ const rules = reactive({
     { min: 6, max: 20, message: "长度在6到20位之间", trigger: "change" },
   ],
 })
+const { isLoading, error, execute } = login(form)
+const msg = computed(() => error.value && "用户名或密码不正确")
 
 async function submit() {
   if (!loginRef.value) return
-  await loginRef.value.validate(async (valid) => {
-    if (valid) {
-      loading.value = true
-      errorMessage.value = ""
-      try {
-        await login(form)
-        loginStore.hide()
-        await userStore.getMyProfile()
-      } catch (err) {
-        errorMessage.value = "用户名或密码不正确"
-      }
-      loading.value = false
+  const valid = await loginRef.value.validate()
+  if (valid) {
+    await execute()
+    if (!error.value) {
+      loginStore.hide()
+      userStore.getMyProfile()
     }
-  })
+  }
 }
 
 function goSignup() {
@@ -75,17 +69,12 @@ function goSignup() {
         ></el-input>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" :loading="loading" @click="submit"
-          >登录</el-button
-        >
+        <el-button type="primary" :loading="isLoading" @click="submit">
+          登录
+        </el-button>
         <el-button @click="goSignup">没有账号，立即注册</el-button>
       </el-form-item>
-      <el-alert
-        v-if="errorMessage"
-        :title="errorMessage"
-        show-icon
-        type="error"
-      />
+      <el-alert v-if="msg" :title="msg" show-icon type="error" />
     </el-form>
   </el-dialog>
 </template>