refactor: 使用父子组件传值来控制登录页

.gitignore

@@ -5,7 +5,6 @@ dist-ssr
 *.local
 .eslintcache
 report.html
-.idea
 
 yarn.lock
 npm-debug.log*

src/store/modules/types.ts

@@ -38,5 +38,4 @@ export type setType = {
 export type userType = {
   username?: string;
   roles?: Array<string>;
-  currentPage?: number;
 };

src/store/modules/user.ts

@@ -16,9 +16,7 @@ export const useUserStore = defineStore({
     username:
       storageSession().getItem<DataInfo<number>>(sessionKey)?.username ?? "",
     // 页面级别权限
-    roles: storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [],
-    // 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
-    currentPage: 0
+    roles: storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? []
   }),
   actions: {
     /** 存储用户名 */
@@ -29,10 +27,6 @@ export const useUserStore = defineStore({
     SET_ROLES(roles: Array<string>) {
       this.roles = roles;
     },
-    /** 存储登录页面显示哪个组件 */
-    SET_CURRENTPAGE(value: number) {
-      this.currentPage = value;
-    },
     /** 登入 */
     async loginByUsername(data) {
       return new Promise<UserResult>((resolve, reject) => {

src/views/login/components/phone.vue

@@ -5,10 +5,18 @@ import { message } from "@/utils/message";
 import { phoneRules } from "../utils/rule";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
-import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Iphone from "@iconify-icons/ep/iphone";
 
+defineProps({
+  currentPage: {
+    type: Number,
+    default: 1
+  }
+});
+
+const $pageEmit = defineEmits(["update:currentPage"]);
+
 const loading = ref(false);
 const ruleForm = reactive({
   phone: "",
@@ -36,7 +44,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
 
 function onBack() {
   useVerifyCode().end();
-  useUserStoreHook().SET_CURRENTPAGE(0);
+  $pageEmit("update:currentPage", 0);
 }
 </script>
 

src/views/login/components/qrCode.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import Motion from "../utils/motion";
 import ReQrcode from "@/components/ReQrcode";
-import { useUserStoreHook } from "@/store/modules/user";
+
+defineProps({
+  currentPage: {
+    type: Number,
+    default: 2
+  }
+});
+
+const $pageEmit = defineEmits(["update:currentPage"]);
 </script>
 
 <template>
@@ -12,10 +20,7 @@ import { useUserStoreHook } from "@/store/modules/user";
     </el-divider>
   </Motion>
   <Motion :delay="150">
-    <el-button
-      class="w-full mt-4"
-      @click="useUserStoreHook().SET_CURRENTPAGE(0)"
-    >
+    <el-button class="w-full mt-4" @click="$pageEmit('update:currentPage', 0)">
       {{ "返回" }}
     </el-button>
   </Motion>

src/views/login/components/register.vue

@@ -5,12 +5,20 @@ import { message } from "@/utils/message";
 import { updateRules } from "../utils/rule";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
-import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Lock from "@iconify-icons/ri/lock-fill";
 import Iphone from "@iconify-icons/ep/iphone";
 import User from "@iconify-icons/ri/user-3-fill";
 
+defineProps({
+  currentPage: {
+    type: Number,
+    default: 3
+  }
+});
+
+const $pageEmit = defineEmits(["update:currentPage"]);
+
 const checked = ref(false);
 const loading = ref(false);
 const ruleForm = reactive({
@@ -63,7 +71,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
 
 function onBack() {
   useVerifyCode().end();
-  useUserStoreHook().SET_CURRENTPAGE(0);
+  $pageEmit("update:currentPage", 0);
 }
 </script>
 

src/views/login/components/resetPassword.vue

@@ -5,11 +5,19 @@ import { message } from "@/utils/message";
 import { updateRules } from "../utils/rule";
 import type { FormInstance } from "element-plus";
 import { useVerifyCode } from "../utils/verifyCode";
-import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Lock from "@iconify-icons/ri/lock-fill";
 import Iphone from "@iconify-icons/ep/iphone";
 
+defineProps({
+  currentPage: {
+    type: Number,
+    default: 4
+  }
+});
+
+const $pageEmit = defineEmits(["update:currentPage"]);
+
 const loading = ref(false);
 const ruleForm = reactive({
   phone: "",
@@ -55,7 +63,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
 
 function onBack() {
   useVerifyCode().end();
-  useUserStoreHook().SET_CURRENTPAGE(0);
+  $pageEmit("update:currentPage", 0);
 }
 </script>
 

src/views/login/index.vue

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  ref,
-  toRaw,
-  reactive,
-  computed,
-  onMounted,
-  onBeforeUnmount
-} from "vue";
+import { ref, toRaw, reactive, onMounted, onBeforeUnmount } from "vue";
 import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
 import { message } from "@/utils/message";
@@ -14,8 +7,8 @@ import { loginRules } from "./utils/rule";
 import phone from "./components/phone.vue";
 import TypeIt from "@/components/ReTypeit";
 import qrCode from "./components/qrCode.vue";
-import regist from "./components/regist.vue";
-import update from "./components/update.vue";
+import register from "./components/register.vue";
+import resetPassword from "./components/resetPassword.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import type { FormInstance } from "element-plus";
 import { operates, thirdParty } from "./utils/enums";
@@ -41,9 +34,8 @@ const router = useRouter();
 const loading = ref(false);
 const checked = ref(false);
 const ruleFormRef = ref<FormInstance>();
-const currentPage = computed(() => {
-  return useUserStoreHook().currentPage;
-});
+// 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
+const currentPage = ref(0);
 
 const { initStorage } = useLayout();
 initStorage();
@@ -189,11 +181,7 @@ onBeforeUnmount(() => {
                   <el-checkbox v-model="checked">
                     {{ "记住密码" }}
                   </el-checkbox>
-                  <el-button
-                    link
-                    type="primary"
-                    @click="useUserStoreHook().SET_CURRENTPAGE(4)"
-                  >
+                  <el-button link type="primary" @click="currentPage = 4">
                     {{ "忘记密码" }}
                   </el-button>
                 </div>
@@ -217,7 +205,7 @@ onBeforeUnmount(() => {
                     :key="index"
                     class="w-full mt-4"
                     size="default"
-                    @click="useUserStoreHook().SET_CURRENTPAGE(index + 1)"
+                    @click="currentPage = item.page"
                   >
                     {{ item.title }}
                   </el-button>
@@ -247,13 +235,19 @@ onBeforeUnmount(() => {
             </el-form-item>
           </Motion>
           <!-- 手机号登录 -->
-          <phone v-if="currentPage === 1" />
+          <phone v-if="currentPage === 1" v-model:current-page="currentPage" />
           <!-- 二维码登录 -->
-          <qrCode v-if="currentPage === 2" />
+          <qrCode v-if="currentPage === 2" v-model:current-page="currentPage" />
           <!-- 注册 -->
-          <regist v-if="currentPage === 3" />
+          <register
+            v-if="currentPage === 3"
+            v-model:current-page="currentPage"
+          />
           <!-- 忘记密码 -->
-          <update v-if="currentPage === 4" />
+          <resetPassword
+            v-if="currentPage === 4"
+            v-model:current-page="currentPage"
+          />
         </div>
       </div>
     </div>

src/views/login/utils/enums.ts

@@ -1,12 +1,15 @@
 const operates = [
   {
-    title: "手机登录"
+    title: "手机登录",
+    page: 1
   },
   {
-    title: "二维码登录"
+    title: "二维码登录",
+    page: 2
   },
   {
-    title: "注册"
+    title: "注册",
+    page: 3
   }
 ];