【Vue3从零开始-实战】S11：setup函数的职责及封装setup函数中的逻辑

2022-10-08 217

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-实战】S11：setup函数的职责及封装setup函数中的逻辑

@@DVBVTGC2D7ROIYF4YK_@O.png

前言

实战已经开始了！上一篇文章中我们把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上新建注册接口

%G92)3OTK}TXJ5NWO4PWZM9.png

👉 注册组件中引入所需的模块

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
    }
}
复制代码