如何使用vue3+elementpluse+pinia实现登录功能？

在Vue 3 + Element Plus + Pinia中实现登录功能，你需要创建一个登录表单，使用Pinia来管理状态，并通过Element Plus的表单组件和按钮组件来构建界面。以下是一个简单的示例：

1. 安装依赖：

npm install pinia element-plus --save

2. 设置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;
    }
  }
});

3. 创建登录组件：

<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>

4. 在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来保存用户信息。在实际应用中，你需要添加更多的逻辑，比如错误处理、路由守卫等，以保证登录流程的安全性和完整性。