feat: 用组合式api重构登录与注册

Author: biao.chen

src/App.vue

@@ -34,46 +34,11 @@ export default defineComponent({
     Footer: defineAsyncComponent(() => import("./components/Footer.vue")),
     ArrowUp: defineAsyncComponent(() => import("./components/Footer.vue")),
   },
-  // data() {
-  //   return {
-  //     isShowNav: false,
-  //     isShowSlider: false,
-  //   };
-  // },
   watch: {
     $route: function (val: any, oldVal: any) {
       this.routeChange(val, oldVal);
     },
   },
-  methods: {
-    // routeChange(val: any, oldVal: any): void {
-    //   const referrer: any = document.getElementById("referrer");
-    //   if (val.path === "/") {
-    //     this.isShowNav = false;
-    //     referrer.setAttribute("content", "always");
-    //   } else {
-    //     this.isShowNav = true;
-    //     referrer.setAttribute("content", "never");
-    //   }
-    //   if (
-    //     val.path === "/articles" ||
-    //     val.path === "/archive" ||
-    //     val.path === "/project" ||
-    //     val.path === "/timeline" ||
-    //     val.path === "/message"
-    //   ) {
-    //     this.isShowSlider = true;
-    //   } else {
-    //     this.isShowSlider = false;
-    //   }
-    //   if (isMobileOrPc()) {
-    //     this.isShowSlider = false;
-    //   }
-    // },
-  },
-  // mounted(): void {
-  //   this.routeChange(this.$route, this.$route);
-  // },
   setup() {
     console.log("setup ");
 
@@ -82,7 +47,7 @@ export default defineComponent({
       isShowSlider: false,
     });
 
-    const router = useRouter();
+    // const router = useRouter();
     const route = useRoute();
 
     const routeChange = (val: any, oldVal: any): void => {
@@ -126,7 +91,6 @@ export default defineComponent({
     return {
       state,
       routeChange,
-      // click
     };
   },
 });
@@ -142,8 +106,7 @@ export default defineComponent({
   -moz-osx-font-smoothing: grayscale;
   text-align: left;
   color: #2c3e50;
-  width: 1200px;
-  margin: 0 auto;
+  // width: 1200px;
   padding-top: 61px;
 }
 img {

src/components/Nav.vue

@@ -191,8 +191,11 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from "vue";
+import { useStore } from 'vuex'
 import { isMobileOrPc, getQueryStringByName } from "../utils/utils";
 import { UserInfo, NavListItem } from "../types/index";
+import service from "../utils/https";
+import urls from "./utils/urls";
 
 export default defineComponent({
   name: "Nav",

src/components/RegisterAndLogin.vue

@@ -1,63 +1,63 @@
 <template>
   <el-dialog
     title="登录"
-    :width="isMobile ? '90%' : '50%'"
-    v-model="dialogDodel"
+    :width="state.isMobile ? '90%' : '50%'"
+    v-model="state.dialogDodel"
     @close="cancel"
     :show-close="true"
   >
     <el-form>
       <el-formItem
         label="邮箱"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
-          v-model="params.email"
+          v-model="state.params.email"
           placeholder="邮箱"
           autocomplete="off"
         >
         </el-input>
       </el-formItem>
       <el-formItem
         label="密码"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
           type="password"
           placeholder="密码"
-          v-model="params.password"
+          v-model="state.params.password"
           autocomplete="off"
         ></el-input>
       </el-formItem>
       <el-formItem
         v-if="handleFlag === 'register'"
         label="昵称"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
-          v-model="params.name"
+          v-model="state.params.name"
           placeholder="用户名或昵称"
           autocomplete="off"
         ></el-input>
       </el-formItem>
       <el-formItem
         v-if="handleFlag === 'register'"
         label="手机"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
-          v-model="params.phone"
+          v-model="state.params.phone"
           placeholder="手机号"
           autocomplete="off"
         ></el-input>
       </el-formItem>
       <el-formItem
         v-if="handleFlag === 'register'"
         label="简介"
-        :label-width="formLabelWidth"
+        :label-width="state.formLabelWidth"
       >
         <el-input
-          v-model="params.desc"
+          v-model="state.params.desc"
           placeholder="个人简介"
           autocomplete="off"
         ></el-input>
@@ -73,13 +73,13 @@
       >github 授权登录</el-button>
       <el-button
         v-if="handleFlag === 'login'"
-        :loading="btnLoading"
+        :loading="state.btnLoading"
         type="primary"
         @click="handleOk"
       >登 录</el-button>
       <el-button
         v-if="handleFlag === 'register'"
-        :loading="btnLoading"
+        :loading="state.btnLoading"
         type="primary"
         @click="handleOk"
       >注 册</el-button>
@@ -88,9 +88,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive, watch, onMounted } from "vue";
+import { useStore } from "vuex";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { key } from '../store'
 import config from "../utils/config";
 import { RegAndLogParams, UserInfo } from "../types/index";
+import service from "../utils/https";
+import urls from "../utils/urls";
 
 export default defineComponent({
   name: "RegisterAndLogin",
@@ -109,131 +115,120 @@ export default defineComponent({
     },
   },
   emits: ["ok", "cancel"],
-  data() {
-    return {
-      dialogDodel: this.visible,
+  setup(props, context) {
+    const store = useStore(key);
+    const state = reactive({
+      dialogDodel: props.visible,
       btnLoading: false,
       loading: false,
-      formLabelWidth: this.isMobile ? "40px" : "60px",
+      formLabelWidth: props.isMobile ? "40px" : "60px",
       params: {
         email: "",
         name: "",
         password: "",
         phone: "",
         desc: "",
       } as RegAndLogParams,
-    };
-  },
-  watch: {
-    dialogDodel: {
-      handler(val: any, oldVal: any) {
-        this.$emit("cancel", val);
-      },
-      immediate: true,
-    },
-    visible: {
-      handler(val: any, oldVal: any) {
-        this.dialogDodel = val;
-      },
-      immediate: true,
-    },
-  },
-  // computed: {
-  //   dialogVisible(): boolean {
-  //     return this.visible;
-  //   },
-  // },
-  methods: {
-    handleOAuth(): void {
+    });
+
+    const route = useRoute();
+    const handleOAuth = (): void => {
       // 保存授权前的页面链接内容
       let preventHistory: object = {
-        name: this.$route.name,
-        query: this.$route.query,
+        name: route.name,
+        query: route.query,
       };
       window.sessionStorage.preventHistory = JSON.stringify(preventHistory);
       // window.location.href = 'https://github.com/login/oauth/authorize?client_id=6de90ab270aea2bdb01c&redirect_uri=http://biaochenxuying.cn/login'
       window.location.href = `${config.oauth_uri}?client_id=${config.client_id}&redirect_uri=${config.redirect_uri}`;
-    },
-    handleOk(): void {
+    };
+
+    const submit = async (): Promise<void> => {
+      let data: any = "";
+      state.btnLoading = true;
+      if (props.handleFlag === "register") {
+        data = await service.post(urls.register, state.params);
+      } else {
+        data = await service.post(urls.login, state.params);
+      }
+      state.btnLoading = false;
+
+      const userInfo: UserInfo = {
+        _id: data._id,
+        name: data.name,
+        avatar: data.avatar,
+      };
+      store.commit("SAVE_USER", {
+        userInfo,
+      });
+      window.sessionStorage.userInfo = JSON.stringify(userInfo);
+      context.emit("ok", false);
+      ElMessage({
+        message: "操作成功",
+        type: "success",
+      });
+    };
+
+    const handleOk = (): void => {
       const reg = new RegExp(
         "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
       ); //正则表达式
-      if (!this.params.email) {
-        // Message.warning("邮箱不能为空！");
-        (this as any).$message({
+      if (!state.params.email) {
+        ElMessage({
           message: "邮箱不能为空！",
           type: "warning",
         });
         return;
-      } else if (!reg.test(this.params.email)) {
-        (this as any).$message({
+      } else if (!reg.test(state.params.email)) {
+        ElMessage({
           message: "请输入格式正确的邮箱！",
           type: "warning",
         });
         return;
       }
-      if (this.handleFlag === "register") {
-        if (!this.params.password) {
-          (this as any).$message({
+      if (props.handleFlag === "register") {
+        if (!state.params.password) {
+          ElMessage({
             message: "密码不能为空！",
             type: "warning",
           });
           return;
-        } else if (!this.params.name) {
-          (this as any).$message({
+        } else if (!state.params.name) {
+          ElMessage({
             message: "用户名不能为空！",
             type: "warning",
           });
           return;
         }
         const re = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
-        if (this.params.phone && !re.test(this.params.phone)) {
-          (this as any).$message({
+        if (state.params.phone && !re.test(state.params.phone)) {
+          ElMessage({
             message: "请输入正确的手机号!",
             type: "warning",
           });
           return;
         }
       }
-      this.submit();
-    },
-    cancel(): boolean {
-      this.$emit("cancel", false);
+      submit();
+    };
+
+    const cancel = (): boolean => {
+      context.emit("cancel", false);
       return false;
-    },
-    async submit(): Promise<void> {
-      let data: any = "";
-      this.btnLoading = true;
-      if (this.handleFlag === "register") {
-        data = await (this as any).$https.post(
-          (this as any).$urls.register,
-          this.params
-        );
-      } else {
-        data = await (this as any).$https.post(
-          (this as any).$urls.login,
-          this.params
-        );
-      }
-      this.btnLoading = false;
+    };
 
-      const userInfo: UserInfo = {
-        _id: data._id,
-        name: data.name,
-        avatar: data.avatar,
-      };
-      (this as any).$store.commit("SAVE_USER", {
-        userInfo,
-      });
-      window.sessionStorage.userInfo = JSON.stringify(userInfo);
-      this.$emit("ok", false);
-      (this as any).$message({
-        message: "操作成功",
-        type: "success",
-      });
-    },
+    watch(props, (val, oldVal) => {
+      state.dialogDodel = val.visible;
+    });
+
+    return {
+      state,
+      handleOAuth,
+      handleOk,
+      submit,
+      cancel,
+    };
   },
-  setup() {},
 });
 </script>
 <style scoped>