前言
实战已经开始了!上一篇文章中我们把Toast组件拆分出来了,并且把其中的逻辑部分也从Login组件中的setup函数中拆分到其组件中去。
其实一个setup函数主要是做什么呢?它的职责又是干啥呢?和vue2中的methods方法有什么区别呢?
在setup函数中,可以用物以类聚人以群分来形容我们的代码逻辑,也就是关于某一块的东西可以放在一起去管理。然而我们在Login.vue页面里面写的代码还不算完全物以类聚了,有些地方还是比较分散的。所以下面我们就需要去把setup函数中的逻辑都分门别类的拆分出来。
拆分Login逻辑
👉 在拆分之前,我们要明确一点,哪些属于Login的逻辑模块。
👉 我们在Login组件页面会发现,有两个input输入框需要进行双向数据绑定,还需要请求mock接口进行登录,最后将错误提示通过Toast组件显示出来。
👉 按照这个逻辑,我们就先将数据绑定的提取出来。
👉 为了更好的绑定数据,我们需要使用以前学过的toRefs方法去解构data里面的值,所以要先引用toRefs
import { reactive, toRefs } from 'vue'
👉 拆分Login逻辑部分还需要将它剥离出setup函数,所以需要在js中新建一个函数来封装Login的逻辑部分。
const useLoginEffect = (showToast) => {
const router = useRouter()
const data = reactive({ mobile: '', password: '' })
const handleLogin = async () => {
try {
const result = await post('/api/user/login', {
username: data.username,
password: data.password
})
if (result.data.code === 0) {
localStorage.isLogin = true
router.push({ name: 'Home' })
} else {
showToast('登陆失败')
}
} catch (e) {
showToast('请求失败')
}
}
const { mobile, password } = toRefs(data)
return { handleLogin, mobile, password }
}
- useLoginEffect函数接收外部传递过来的showToast方法。
- 将数据值return出去之前,需要将输入框绑定的值从data中解构出来,这样在页面中就可以直接使用解构出来的值了,不需要通过data.xxx的方式来绑定了。
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入手机号" v-model="mobile" />
</div>
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入密码" v-model="password" />
</div>
👉 拆分跳转注册的逻辑
// 处理注册跳转
const useRegisterEffect = () => {
const router = useRouter()
const handleRegisterClick = () => {
router.push({ name: 'Register' })
}
return { handleRegisterClick }
}
👉 在setup函数中就可以像获取Toast组件中的数据一样获取封装的Login逻辑了。
setup () {
const router = useRouter()
const { toastData, showToast } = useToastEffect()
const { mobile, password, handleLogin } = useLoginEffect(showToast)
const handleRegisterClick = () => {
router.push({ name: 'Register' })
}
return { handleLogin, handleRegisterClick, mobile, password, toastData }
}
- 通过解构useLoginEffect方法,得到的数据值在通过setup函数return到外部使用。
🔆 这样拆分之后,setup函数里面的代码就会一目了然,需要修改某个部分的逻辑就直接找到对应的函数即可。不需要再像之前一样,数据和逻辑可能中间还插入了其他代码。
😲 登录页面中的逻辑都拆分完成了,我们也可以把注册的逻辑像登录一样去完善,并且调用mock接口。
注册逻辑
👉 在fastmock上新建注册接口
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zHhS3HzI-1658392802423)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e82b9762bd64b9a9b81c3e290310947~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]
👉 注册组件中引入所需的模块
import { useRouter } from 'vue-router'
import { reactive, toRefs } from 'vue'
import { post } from '../../utils/request'
import Toast, { useToastEffect } from '../../components/Toast'
👉 注册逻辑就不写在setup中了,直接就拆分成一个单独的方法
// 处理注册相关逻辑
const useRegisterEffect = (showToast) => {
const router = useRouter()
const data = reactive({
mobile: '',
password: '',
ensurement: ''
})
const handleRegister = async () => {
try {
const result = await post('/api/user/register', {
mobile: data.mobile,
password: data.password
})
if (result.data.code === 0) {
router.push({ name: 'Login' })
} else {
showToast('注册失败')
}
} catch (e) {
showToast('请求失败')
}
}
const { mobile, password, ensurement } = toRefs(data)
return { mobile, password, ensurement, handleRegister }
}
- 注册逻辑和登录差不多,只是多了一个参数而已,接口名是新建的注册接口。
👉 将注册逻辑中的数据绑定到input输入框中
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入手机号" v-model="mobile" />
</div>
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="请输入密码" type="password" v-model="password" />
</div>
<div class="wrapper__input">
<input class="wrapper__input__content" placeholder="确认密码" type="password" v-model="ensurement" />
</div>
👉 注册页还有一个跳转登录逻辑,也可以拆分出来
// 处理登陆跳转
const useLoginEffect = () => {
const router = useRouter()
const handleLoginClick = () => {
router.push({ name: 'Login' })
}
return { handleLoginClick }
}
👉 setup函数调用封装的逻辑方法
setup () {
const { toastData, showToast } = useToastEffect()
const { mobile, password, ensurement, handleRegister } = useRegisterEffect(showToast)
const { handleLoginClick } = useLoginEffect()
return {
mobile,
password,
ensurement,
toastData,
handleRegister,
handleLoginClick
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5FkCad86-1658392802424)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b328990ce2645beb4f0b44e8b1435e9~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]
总结
本篇文章主要讲解了setup函数的职责,就是为了方便我们知道代码执行的一个流程而已,没有过多的逻辑代码。所有的逻辑代码都可以封装在setup函数外部,然后进行引用或者调用之后再return给其他逻辑部分使用或者页面使用。