第六节：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 持久化后面完善。