封装比较好的登录页面

封装比较好的登录页面

只在setup()函数中写流程，将逻辑代码抽离出来

<template><div class="wrapper"><img class="wrapper__img" src='http://www.dell-lee.com/imgs/vue3/user.png' /><div class="wrapper__input"><inputclass="wrapper__input__content"placeholder="用户名"v-model="username"/></div><div class="wrapper__input"><inputtype="password"class="wrapper__input__content"placeholder="请输入密码"v-model="password"autocomplete="new-password"/></div><div class="wrapper__login-button" @click="handleLogin">登陆</div><div class="wrapper__login-link" @click="handleRegisterClick">立即注册</div><Toast v-if="show" :message="toastMessage"/></div>
</template><script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { post } from '../../utils/request'
import Toast, { useToastEffect } from '../../components/Toast'// 处理注册逻辑
const useLoginEffect = (showToast) => {const router = useRouter()const data = reactive({ username: '', password: '' })const handleLogin = async () => {try {const result = await post('/api/user/login', {username: data.username,password: data.password})if (result?.errno === 0) {localStorage.isLogin = truerouter.push({ name: 'Home' })} else {showToast('登陆失败')}} catch (e) {showToast('请求失败')}}const { username, password } = toRefs(data)return { username, password, handleLogin}
}// 处理注册跳转
const useRegisterEffect = () => {const router = useRouter()const handleRegisterClick = () => {router.push({ name: 'Register' })}return { handleRegisterClick }
}export default {name: 'Login',components: { Toast },// 职责就是告诉你，代码执行的一个流程setup () {const { show, toastMessage, showToast } = useToastEffect()const { username, password, handleLogin } = useLoginEffect(showToast)const { handleRegisterClick } = useRegisterEffect()return {username, password, show, toastMessage,handleLogin, handleRegisterClick,}}
}
</script><style lang="scss" scoped>
</style>