课程名称：前端工程师
课程章节： 第三章 项目登录&注册页开发
主讲老师：Dell

课程内容： 第三章 登录&注册页开发

3-7通过代码拆分增加逻辑可维护性

代理优化: 组件相关的功能逻辑都封装在组件里; 简化 setup 函数:

1. 代码很多，优化下。 将toast弹窗相关的数据和方法放到一起

2. Toast所有相关的都放到toast中统一的维护
   

3-8 Setup函数的职责以及注册功能的实现

1. 使用 toRef

name 2s后不会变，不是响应式的数据，所以要用ref、reactive
ref处理基础数据类型
reactive处理对象、数组等
注意toRefs、toRef
reactive只是对象是响应式的，里面的值不是响应式的。
所以利用toRefs可以将里面的多个值变成响应式。
toRef是给一个默认值，虽然没有data但不会报错。

2. data这个对象是响应式的，里面的数据不是
   toRefs将username、password变成响应式的
   就不用return data了，直接return username、password
   template中要使用的就要return！
3. show、toastMessage、showToast都要导出
4. 按功能块去整理代码逻辑
   setup主要做流程的函数，其他的逻辑封装到各自组件/模块中

3-9 Setup函数的职责以及注册功能的实现

autocomplete=“new-password” 关闭chrom的自我填充

处理注册流程、处理注册跳转流程、代码执行的一个流程，分开写，易读，逻辑更清晰。

//  （一）处理登陆流程
const useLoginEffcet = (showToast) => {
  const router = useRouter()
  const data = reactive({username: "", password: ""})
// 请求后端的逻辑，异步操作
  const handleLogin = async () => {
      //  发一个请求
      // 先执行await中的代码，后面的地址出错的时候，就会抛出
    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 {username,password } = toRefs (data)
  return {username,password,handleLogin}
}

// 处理注册跳转
const uesRegisterEffect = () => {
  const router = useRouter()
  const handleRegisterClick = () => {
  // 路由跳转功能，跳转到name是Register这个router页面
   router.push({ name: "Register" });
  }
  return { handleRegisterClick }
 }

export default {
  name: "Login",
  //  记得定义Toast子组件
  components: { Toast },
  // 职责就是告诉你，代码执行的一个流程
  setup() {
    const { show, toastMessage, showToast } = useToastEffect()
    const { username, password, handleLogin }= useLoginEffcet( showToast )
    const { handleRegisterClick } = uesRegisterEffect()

    return { username, password , show, toastMessage, handleLogin, handleRegisterClick };
  }
};