【九月打卡】第21天 通过代码拆分增加逻辑可维护性，Setup函数的职责以及注册功能的实现

课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节：9-8 通过代码拆分增加逻辑可维护性，9-9 Setup函数的职责以及注册功能的实现（1），9-10 Setup函数的职责以及注册功能的实现（2）

主讲老师：Dell

课程内容：

今天学习的内容包括：通过代码拆分增加逻辑可维护性，Setup 函数的职责以及注册功能的实现。

示例代码：
<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'
import Toast, { useToastEffect } from '../../components/Toast'

export default {
  name: 'Login',
  components: { Toast },
  setup () {
    const router = useRouter()
    const data = reactive({ username: '', password: '' })
    const { toastData, showToast } = useToastEffect()

    const handleLogin = async () => {
      try {
        const result = await post('/api/user/login', {
          username: data.username,
          password: data.password
        })
        if (result?.errno === 0) {
          localStorage.isLogin = true
          router.push({ name: 'Home' })
        } else {
          showToast('登陆失败')
        }
      } catch (e) {
        showToast('请求失败')
      }
    }

    const handleRegisterClick = () => {
      router.push({ name: 'Register' })
    }

    return { handleLogin, handleRegisterClick, data, toastData }
  }
}
</script>

<script>
import { reactive } from 'vue'

export default {
  props: ['message']
}

export const useToastEffect = () => {

  const toastData = reactive({
    showToast: false,
    toastMessage: ''
  })

  const showToast = (message) => {
    toastData.showToast = true
    toastData.toastMessage = message
    setTimeout(() => {
      toastData.showToast = false
      toastData.toastMessage = ''
    }, 2000)
  }

  return { toastData, showToast }
}
</script>

课程收获：

今天把第九章剩下的三个小节给学完了。今天老师把之前的代码重新拆分了，这样可以提高代码逻辑的可维护性。顺便把注册功能也给做了，但是注册功能和登录功能中有很多重复的代码，明天打算把登录注册页面重构一遍。第九章学完之后，明天准备开始第十章的学习，加油。

今日课程学习时间大约花费 18 分钟。