第六节：Pinia 状态管理搭建-北京尧图网络

第六节Pinia 状态管理搭建目标搭建 pinia实现用户信息存储token、用户名替代 Vuex全部使用 setup 语法。新建两个 storeuser.js 用户模块token、用户信息、登录 / 退出登录方法app.js 应用模块预留侧边栏展开收缩等全局状态步骤 1创建用户 storesrc/stores/user.jsimport{defineStore}frompiniaexportconstuseUserStoredefineStore(user,{state:()({token:,username:}),getters:{isLogin:(state)!!state.token},actions:{// 设置用户信息setUserInfo(token,username){this.tokentoken this.usernameusername},// 清空用户退出登录logout(){this.tokenthis.username}}})步骤 2创建应用全局 storesrc/stores/app.jsimport{defineStore}frompiniaexportconstuseAppStoredefineStore(app,{state:()({// 侧边栏是否折叠sidebarCollapse:false}),actions:{toggleSidebar(){this.sidebarCollapse!this.sidebarCollapse}}})步骤 3修改登录页面src/views/login/index.vue接入 piniatemplatediv classlogin-containerel-card stylewidth:420px;margin:100px auto;h2 styletext-align:center;margin-bottom:20px;系统登录/h2el-formel-form-item label账号el-input v-modelloginForm.username/el-input/el-form-itemel-form-item label密码el-input v-modelloginForm.passwordtypepassword/el-input/el-form-itemel-button typeprimarystylewidth:100%clickhandleLogin登录/el-button/el-formdiv stylemargin-top:16px;divtoken{{userStore.token}}/divdiv用户名{{userStore.username}}/div/div/el-card/div/templatescript setupimport{useUserStore}from/stores/userimport{useRouter}fromvue-routerconstrouteruseRouter()constuserStoreuseUserStore()constloginFormreactive({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)}/scriptstyle scoped.login-container{background-color:#f5f7fa;min-height:100vh;}/style✅第六节测试启动pnpm dev访问/login输入账号 admin密码 123456点击登录弹出登录成功提示页面跳转到/dashboard/index返回登录页可以看到 store 已经保存 token 和用户名F12 控制台无报错。注意目前 pinia 数据存在内存刷新页面数据会丢失localStorage 持久化后面完善。

第六节：Pinia 状态管理搭建

相关推荐

京东2016系统测试工程师笔试真题解析：核心考点与答题思路

Keil + STM32CubeProgrammer：解决下载失败、读保护与批量烧录

Codex中转站接入全攻略：CLI安装、API配置与报错排查

更多资讯

LeIsaac × Cosmos video2action 数据管线：如何用 1 条演示扩出大规模合成机器人视频动作

【免费开源】开镜跟枪差半拍？PUBG罗技鼠标宏免费开放，3步导入

Node构建JSON清单如何做最长连续失败段：用本地脚本建立可复核指标

Node构建JSON清单如何做重复步骤执行计数：用本地脚本建立可复核指标

Node构建JSON清单如何做最近秩P90耗时：用本地脚本建立可复核指标

Node构建JSON清单如何做耗时中位数计算：用本地脚本建立可复核指标

今日更新

AI智能体开发实战：从技术原理到商业落地

OpenShell 完全定制指南：从安装到深度配置，打造高效 Windows 开始菜单

Superpowers技能体系全解析：从Skills引入到安装的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？