在Vue 3 + Element Plus + Pinia中实现登录功能，你需要创建一个登录表单，使用Pinia来管理状态，并通过Element Plus的表单组件和按钮组件来构建界面。以下是一个简单的示例：
- 安装依赖：
npm install pinia element-plus --save- 设置Pinia store来管理登录状态：
// store.js
import { defineStore } from 'pinia'
export const useLoginStore = defineStore({
id: 'login',
state: () => ({
userInfo: null,
}),
actions: {
login(credentials) {
// 这里进行登录验证逻辑，例如发送API请求
// 登录成功后，保存用户信息到userInfo
this.userInfo = { ...credentials, isLoggedIn: true };
},
logout() {
this.userInfo = null;
}
}
});- 创建登录组件：
<template>
<el-form @submit.prevent="handleSubmit">
<el-form-item label="用户名">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">登录</el-button>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive } from 'vue';
import { useLoginStore } from './store';
const loginStore = useLoginStore();
const form = reactive({
username: '',
password: ''
});
function handleSubmit() {
loginStore.login(form);
// 登录成功后，通常需要跳转到另一个页面
// router.push('/home');
}
</script>- 在main.js中配置Pinia和Element Plus：
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import { ElementPlus } from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(ElementPlus)
app.mount('#app')确保你的Vue 3项目已经安装并配置了Element Plus和Pinia。上述代码提供了一个简单的登录表单，并在用户登录时使用Pinia来保存用户信息。在实际应用中，你需要添加更多的逻辑，比如错误处理、路由守卫等，以保证登录流程的安全性和完整性。