<script setup lang="ts"> import { reactive, ref } from 'vue'; import type { FormInst, FormRules } from 'naive-ui'; import { EnumLoginModule } from '@/enum'; import { useAuthStore } from '@/store'; import { useRouterPush } from '@/composables'; import { formRules } from '@/utils'; import { OtherAccount } from './components'; const auth = useAuthStore(); const { login } = useAuthStore(); const { toLoginModule } = useRouterPush(); const formRef = ref<HTMLElement & FormInst>(); const model = reactive({ userName: 'Soybean', password: 'soybean123' }); const rules: FormRules = { password: formRules.pwd }; const rememberMe = ref(false); async function handleSubmit() { await formRef.value?.validate(); const { userName, password } = model; login(userName, password); } function handleLoginOtherAccount(param: { userName: string; password: string }) { const { userName, password } = param; login(userName, password); } </script> <style scoped></style> Footer 2022 GitHub, Inc. Footer navigation Terms Privacy 这段代码不是太懂，求大佬们帮解释下 我看登陆是调用 handleSubmit，handleSubmit是await formRef，这个 formRef 的值ref<HTMLElement & FormInst>();是啥意思?
const { login } = useAuthStore();这个也不是很懂，我看也没有 import login 函数啊，这行代码的意思是 把 useAuthStore 的返回值 赋给 login 函数？
 | 1 renmu 2022-10-22 22:41:42 +08:00 via Android formref 就是一个那个自定义 form 标签的 ref ，然后调用 validdate 方法。 @/store 里有个 useauthstore 函数，里面有登录的逻辑 |
 | 2 vecZro 2022-10-22 22:48:00 +08:00 via Android formRef 应该是获取表单组件的引用吧，提交表单的时候调用这个表单组件的 validate 方法进行表单数据的验证 const { login } = useAuthStore()就是解构 useAtuStore 函数执行完会返回一个对象，这个对象里面会包含这个 login 属性 const res = useAuthStore() const login = res.login https://developer.mozilla.org/zh-CN/docs/Web/Javascript/Reference/Operators/Destructuring_assignment |
Select Language