企业官网建设流程全解析

第六节：Pinia 状态管理搭建

目标：搭建 pinia，实现用户信息存储（token、用户名），替代 Vuex，全部使用 setup 语法。
新建两个 store：

1. user.js 用户模块：token、用户信息、登录 / 退出登录方法
2. app.js 应用模块：预留侧边栏展开收缩等全局状态

步骤 1：创建用户 storesrc/stores/user.js

import{defineStore}from'pinia'exportconstuseUserStore=defineStore('user',{state:()=>({token:'',username:''}),getters:{isLogin:(state)=>!!state.token},actions:{// 设置用户信息setUserInfo(token,username){this.token=token this.username=username},// 清空用户，退出登录logout(){this.token=''this.username=''}}})

步骤 2：创建应用全局 storesrc/stores/app.js

import{defineStore}from'pinia'exportconstuseAppStore=defineStore('app',{state:()=>({// 侧边栏是否折叠sidebarCollapse:false}),actions:{toggleSidebar(){this.sidebarCollapse=!this.sidebarCollapse}}})

步骤 3：修改登录页面src/views/login/index.vue，接入 pinia

<template><div class="login-container"><el-card style="width:420px;margin:100px auto;"><h2 style="text-align:center;margin-bottom:20px;">系统登录</h2><el-form><el-form-item label="账号"><el-input v-model="loginForm.username"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="loginForm.password"type="password"></el-input></el-form-item><el-button type="primary"style="width:100%"@click="handleLogin">登录</el-button></el-form><div style="margin-top:16px;"><div>token：{{userStore.token}}</div><div>用户名：{{userStore.username}}</div></div></el-card></div></template><script setup>import{useUserStore}from'@/stores/user'import{useRouter}from'vue-router'constrouter=useRouter()constuserStore=useUserStore()constloginForm=reactive({username:'',password:''})consthandleLogin=()=>{// 模拟登录赋值，后面替换axios请求if(!loginForm.username||!loginForm.password){ElMessage.warning('账号密码不能为空')return}userStore.setUserInfo('mock-token-123456',loginForm.username)ElMessage.success('登录成功')// 跳转到后台首页router.push('/dashboard/index')}</script><style scoped>.login-container{background-color:#f5f7fa;min-height:100vh;}</style>

✅第六节测试

1. 启动pnpm dev，访问/login
2. 输入账号 admin，密码 123456，点击登录
3. 弹出登录成功提示，页面跳转到/dashboard/index
4. 返回登录页，可以看到 store 已经保存 token 和用户名
5. F12 控制台无报错。

注意：目前 pinia 数据存在内存，刷新页面数据会丢失，localStorage 持久化后面完善。