refactor: 使用vue3组合式API重构登录页代码 (#172)

web/src/management/pages/login/LoginPage.vue

@@ -14,7 +14,7 @@
       <el-form
         :model="formData"
         :rules="rules"
-        ref="formData"
+        ref="formDataRef"
         label-width="100px"
         class="login-form"
         @submit.prevent
@@ -36,17 +36,17 @@
 
         <el-form-item class="button-group">
           <el-button
-            :loading="loginPending"
+            :loading="pending.login"
             size="small"
             type="primary"
             class="button"
-            @click="submitForm('formData', 'login')"
+            @click="submitForm('login')"
             >登录</el-button
           >
           <el-button
-            :loading="registerPending"
+            :loading="pending.register"
             class="button register-button"
-            @click="submitForm('formData', 'register')"
+            @click="submitForm('register')"
             >注册</el-button
           >
         </el-form-item>
@@ -55,24 +55,42 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { onMounted, ref, reactive } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute, useRouter } from 'vue-router'
+
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
 
 import { login, register } from '@/management/api/auth'
-import { refreshCaptcha } from '@/management/api/captcha'
+import { refreshCaptcha as refreshCaptchaApi } from '@/management/api/captcha'
 import { CODE_MAP } from '@/management/api/base'
-export default {
-  name: 'LoginPage',
-  data() {
-    return {
-      formData: {
+
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+
+interface FormData {
+  name: string
+  password: string
+  captcha: string
+  captchaId: string
+}
+
+interface Pending {
+  login: boolean
+  register: boolean
+}
+
+const formData = reactive<FormData>({
   name: '',
   password: '',
   captcha: '',
   captchaId: ''
-      },
-      rules: {
+})
+
+const rules = {
   name: [
     { required: true, message: '请输入账号', trigger: 'blur' },
     {
@@ -98,71 +116,74 @@ export default {
       trigger: 'blur'
     }
   ]
-      },
-      loginPending: false,
-      registerPending: false,
-      captchaImgData: ''
-    }
-  },
-  created() {
-    this.refreshCaptcha()
-  },
-  methods: {
-    submitForm(formName, type) {
-      this.$refs[formName].validate(async (valid) => {
+}
+
+onMounted(() => {
+  refreshCaptcha()
+})
+
+const pending = reactive<Pending>({
+  login: false,
+  register: false
+})
+
+const captchaImgData = ref<string>('')
+const formDataRef = ref<any>(null)
+
+const submitForm = (type: 'login' | 'register') => {
+  formDataRef.value.validate(async (valid: boolean) => {
     if (valid) {
       try {
         const submitTypes = {
           login,
           register
         }
-            this[`${type}Pending`] = true
-            const res = await submitTypes[type]({
-              username: this.formData.name,
-              password: this.formData.password,
-              captcha: this.formData.captcha,
-              captchaId: this.formData.captchaId
+        pending[type] = true
+        const res: any = await submitTypes[type]({
+          username: formData.name,
+          password: formData.password,
+          captcha: formData.captcha,
+          captchaId: formData.captchaId
         })
-            this[`${type}Pending`] = false
+        pending[type] = false
         if (res.code !== CODE_MAP.SUCCESS) {
           ElMessage.error(res.errmsg)
           throw new Error('登录/注册失败' + res.errmsg)
         }
-            this.$store.dispatch('user/login', {
+        store.dispatch('user/login', {
           username: res.data.username,
           token: res.data.token
         })
-            let redirect = {
+        let redirect: any = {
           name: 'survey'
         }
-            if (this.$route.query.redirect) {
-              redirect = decodeURIComponent(this.$route.query.redirect)
+        if (route.query.redirect) {
+          redirect = decodeURIComponent(route.query.redirect as string)
         }
-            this.$router.replace(redirect)
+        router.replace(redirect)
       } catch (error) {
-            this[`${type}Pending`] = false
+        pending[type] = false
       }
       return true
     } else {
       return false
     }
   })
-    },
-    async refreshCaptcha() {
+}
+
+const refreshCaptcha = async () => {
   try {
-        const res = await refreshCaptcha({
-          captchaId: this.formData.captchaId
+    const res: any = await refreshCaptchaApi({
+      captchaId: formData.captchaId
     })
     if (res.code === 200) {
       const { id, img } = res.data
-          this.formData.captchaId = id
-          this.captchaImgData = img
+      formData.captchaId = id
+      captchaImgData.value = img
     }
   } catch (error) {
     ElMessage.error('获取验证码失败')
   }
-    }
-  }
 }
 </script>