从无到有构建vue实战项目(七)
十四、Vuex的使用
-
Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。简单点理解,就是凡是将数据用状态管理模式来存储,在用到该数据的地方,只要一处地方发生变化,另一处也会发生变化,这样就解决了vue中非父子组件传值的问题,当然了,Vuex的作用不止如此,还有许多新的功能,诸如配合路由守卫做登陆拦截,配合localStorage进行本地数据的存储与管理等等。
-
Vuex的安装
//npm的安装方式 npm install vuex --save
-
Vuex的简单实用
-
利用Vuex和localStorage进行用户状态管理,防止刷新浏览器后用户状态丢失,实现如下:
//发送请求 this.axios .post( "url", JSON.stringify(this.userInfo) ) .then(res => { console.log(res.data); if (res.status == 200 && res.data.verify == true) { const userName = res.data.uphone; const token = res.data.token; this.$router.push({ path: "/" }); //将token通过commit提交到Vuex this.$store.commit("getToken", token); // 将登录名使用vuex传递到Home页面 this.$store.commit("userName", userName); } else { this.$notify({ title: "提示信息", message: "账号或密码错误", type: "error" }); } }) .catch(err => { console.log(err); });
-
通过Vuex和localStorage存储用户信息以保持用户状态
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const mutations = { userName: (state, user_name) => { state.user_name = user_name // 把登录的用户的名保存到localStorage中,防止页面刷新,导致vuex重新启动,用户名就成为初始值的情况 localStorage.setItem('user_name', user_name) }, getToken(state, token) { state.token = token; localStorage.setItem('token', token) }, } const state = { user_name: localStorage.getItem('user_name'), token: localStorage.getItem('token'), } // getters 只会依赖 state 中的成员去更新 const getters = { userPhone: (state) => state.user_name, token: (state) => state.token, } const store = new Vuex.Store({ actions, mutations, state, getters }) export default store
-
至此,该功能已实现
-
十五、侧边导航栏的实现
-
有时候,我们在项目中有这样的需求,页面左侧是菜单栏,右边是每个菜单项所对应的内容区,点击不同的菜单项,内容区会显示不同的内容,这个怎样实现呢?我采取了子路由渲染的方法,如下:
-
假设我们有四个菜单项模块,那么它的路由配置是这样的:
{ path: '/inform', name: inform, component: (resolve) => require(['../components/presonal/inform.vue'], resolve), meta: { isLogin: true }, children: [{ path: '/inform/course', name: course, component: (resolve) => require(['../components/presonal/slider/course.vue'], resolve) }, { path: '/inform/interactive', name: interactive, component: (resolve) => require(['../components/presonal/slider/interactive.vue'], resolve) }, { path: '/inform/system', name: system, component: (resolve) => require(['../components/presonal/slider/system.vue'], resolve) }, { path: '/inform/privateLetter', name: privateLetter, component: (resolve) => require(['../components/presonal/slider/privateLetter.vue'], resolve) } ] },
-
然后我们在它的父级路由所对应的页面加上
<router-view></router-view>
即可实现该功能
-
-
至此,该功能已实现
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 手把手教你更优雅的享受 DeepSeek
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现