Vue3中Element-Plus登录表单校验以及Pinia管理用户数据

一、登录表单准备

            

二、实现代码 

 <div class="form">
            <el-form ref="formRef" :model="form" :rules="rules" status-icon>
              <!-- 账户验证区域 -->
              <el-form-item prop="account" label="账户">
              <el-input v-model="form.account"/>
              </el-form-item>
              <!-- 密码验证区域 -->
              <el-form-item prop="password" label="密码">
                <el-input v-model="form.password"/>
              </el-form-item>
              <!-- 隐私协议勾选区域 -->
              <el-form-item label-width="22px" prop="agree">
                <el-checkbox  size="large" v-model="form.agree">
                  我已同意隐私条款和服务条款
                </el-checkbox>
              </el-form-item>
              <el-button size="large" class="subBtn"   @click="doLogin">点击登录</el-button>
            </el-form>
</div>

三、表单校验规则

import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
// 导入登录接口loginAPI
// import { loginAPI } from '@/apis/user'
// 表单校验（账号名＋密码）
// 准备表单对象
import { ref} from 'vue'
//导入 router对象
import { useRouter } from 'vue-router'
//导入用户store
import { useUserStore } from '@/stores/user'
// 获取用户store实例
const userStore = useUserStore()

// 创建router实例
const router = useRouter()
const form = ref({
  password: '',
  account: '',
  agree: true
})
// 准备规则对象
// 规则数据对象
const rules = {
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur'},
    { min: 6, max: 24, message: '密码长度要求6-14个字符' }
  ],
  account: [
    { required: true, message: '用户名不能为空', trigger: 'blur' }
  ],
  agree: [
    {
      validator: (rule, val, callback) => {
        return val ? callback() : new Error('请先同意协议')
      }
    }
  ]
}

四、点击登录统一校验表单防止误操作

// 获取form表单实例统一校验
const formRef = ref(null)
const doLogin = () => {
  const { account, password } = form.value
  // 调用实例方法
  formRef.value.validate(async (valid) => {
    // valid: 所有表单都通过校验  才为true
    console.log(valid)
    // 以valid做为判断条件 如果通过校验才执行登录逻辑
    if (valid) {
      // TODO LOGIN
      // await loginAPI({ account, password })
      await userStore.getUserInfo({ account, password })
      // 1. 提示用户
      ElMessage({ type: 'success', message: '登录成功' })
      // 2. 跳转首页
      router.replace({ path: '/' })
    }
  })
}

五、用户登录接口/apis/user.js

import http from "@/utils/http"
export const loginAPI = ({account,password}) =>{
return http({
    url:"/login",
    method:"post",
    data:{
        account,
        password
    }
})
}

六、Pinia管理用户数据持久化/stores/user.js

// 管理用户数据相关
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { loginAPI } from '@/apis/user'
export const useUserStore = defineStore('user', () => {
  // 1. 定义管理用户数据的state
  const userInfo = ref({})
  // 2. 定义获取接口数据的action函数
  const getUserInfo = async ({ account, password }) => {
    const res = await loginAPI({ account, password })
    userInfo.value = res.result
  }
  // 3. 以对象的格式把state和action return
  return {
    getUserInfo,
    userInfo
  }
}, {
  persist: true,
})