【Vue3】封装 api 实现注册功能

需求：封装注册api，进行注册，注册成功切换到登录

1. 新建 api/user.js 封装

import request from '@/utils/request'

// api模块的方法最好也遵循一定的规范，user模块中的用途：注册（Register），请求服务（Service）。user模块下的注册方法，并且它是一个请求服务。名字不要嫌单词长，当项目越来越大的时候，语义就会越来越明显
// 解构，这里可以直接将花括号与return简写
// 注册接口
export const userRegisterService = ({ username, password, repassword }) =>
  request.post('/api/reg', { username, password, repassword })

2. 页面中调用

ElMessage：

1. 直接传入一个方法，里面传入消息
2. 里面传入一个对象，对象里面填入消息，加一个type类型
3. 还有一种更简单的形式：el跟上所要进行的方法名

const register = async () => {
  await form.value.validate()
  // 直接将这个对象传过去
  await userRegisterService(formModel.value)
  ElMessage.success('注册成功')
  // 切换到登录
  isRegister.value = false
}

3. eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

Elment UI在最早期配的一个按需，按需会帮我们自动进行导入进行注册，包括这个方法，但是VSCode/ESLint 并不知道你注册了这个方法，我们的声明一下这个全局变量，这个变量是不需要去校验的

这些全局变量名无需校验，是可以直接使用的

.eslintrc.cjs

module.exports = {
  ...
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}