[FE] 求大佬解释登陆部分代码

[garyox64]

源码： https://github.com/honghuangdc/soybean-admin/blob/main/src/views/system-view/login/components/PwdLogin/index.vue

<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 函数？

[renmu]

formref 就是一个那个自定义 form 标签的 ref ，然后调用 validdate 方法。

@/store 里有个 useauthstore 函数，里面有登录的逻辑

[vecZro]

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

[garyox64]

@renmu 哦哦，看到了 ref 了，感谢！
@vecZro 哦哦，懂了，看过解构，但是 login 这个 我只看到一个 async 的 login ，没理解它就是返回的一部分，感谢大佬指点