微客导航 » 文章资讯 » 详解使用vuex进行菜单管理

详解使用vuex进行菜单管理

2023-09-19 01:41:05 146

vuex的优势在复杂状态管理中才能提现出来。

如果项目中有多级菜单，且不同组件中散布多个相同级别的菜单，项目同一时刻各级菜单有且仅有一个高亮，菜单跳转时除了路由改变，相应菜单也要高亮（之前的恢复非高亮状态），这便是个使用vuex再好不过的场景。

使用DOM操作进行简单菜单管理

使用DOM进行菜单管理，背后的思想是：在点击菜单的同时，将事件对象传入事件处理程序，想让当前高亮的menu非高亮，再让点击的menu高亮。


注册
充值
购买
到期
提现

menuClicked(event,url){
//当前高亮的menu非高亮
constcurrentActiveLink=this.querySelector('.active');
currentActiveLink.classList.remove('active');
//当前点击的menu高亮
event.target.classList.add('active');
//路由跳转
this.$router.push(`/panel/list/${url}`);
},

这样虽然实现了点击切换时menu高亮，但有一个bug：每次初始化都会使默认的menu变成高亮，如果此时在非默认高亮的menu中用户手动刷新页面，会导致menu高亮错误（比如在buylist页面刷新页面后，页面内容依然停留在buylist，但高亮的菜单却变成了userlist）。

如果要解决这个bug，就需要在本地存储（刷新不改变存储状态）menu状态，本地存储可以选择不同的方案，在此不做讨论，但可以肯定的是DOM+本地存储控制menu高亮的方案在项目逐渐变大以后会变得难以维护。

现在是vuex登场的时候了。

使用vuex进行菜单管理

使用vuex进行菜单管理需要在开发前就规划好菜单的层级，以便在vuex分配state和mutations。

规划层级

确定项目中哪些是一级菜单，哪些是二级菜单，以此类推……这里要注意的是，为简化操作，同级别菜单都以不同名称命名，这样在vuex中就不需要关注菜单属于那个页面，只关注状态就好。菜单层级通常如下：

|-root
||
||-first-menu1
|||-second-menu1
|||-second-menu2
|||-second-menu3
||
||-first-menu2
||-second-menu3
||-second-menu4
||-second-menu5

在vuex分配`state`和`mutations`

不同层级的菜单分别占用一个`state`，至于`mutations`，本例中不同`state`分别对应写了一个`mutations`，实际工作中为了更大成都减少代码复用，对于menu的状态管理可以只写一个`mutations`，通过传参判断是更改哪个层级及对应的menu。

需要注意的是vuex在页面刷新后状态会重新初始化，这显然和管理菜单所需功能不符（除了主动触发，其他操作不能对菜单产生影响）。可以通过vuex-persistedstate改变vuex默认生命周期，下面示例代码将vuex状态存储在了cookie中：

conststore=newVuex.Store({
state:{
//初始化
activeFirstMenu:'firstMenu1',
activeSecondMenu:'secondMenu1',
},
mutations:{
//更改一级菜单
changeFirstActiveMenu(state,menu){
state.activeFirstMenu=menu;
},
//更改二级二级菜单
changeSecondActiveMenu(state,menu){
state.activeSecondMenu=menu;
}
},
});

组件中渲染

在template动态加载高亮class，通过vuex中state控制：


secondMenu1

secondMenu2

secondMenu3

写js时有个技巧：路由path和对应高亮的menu名称最好相同，因为路由跳转和高亮menu直接相关，这样可以减少一个参数：

data(){
return{
//初始化
activeMenu:{
//menu名称相同，和对应路由的path相同
secondMenu1:'',
secondMenu2:'',
secondMenu3:'',
},
};
},
computed:{
activeMenuName(){
//检测vuex中activeSecondMenu的变化
returnthis.$store.state.activeSecondMenu;
}
},
methods:{
menuClicked(path){
//取消当前tab高亮
this.activeMenu[this.activeMenuName]=false;

//更新vuex状态及menu高亮
this.$store.commit("changeSecondActiveMenu",path);
this.activeMenu[this.activeMenuName]=true;

//路由跳转path和对应menu名称相同
this.$router.push(`/somePath/${path}`);
},
init(){
//刷新页面重置正确高亮菜单tab
this.activeMenu[this.activeMenuName]=true;
},
},
mounted:{
this.init();
},

其他

对于vuex的优化

上文有谈到，实际工作中为了更大程度实现代码复用，对于某个类别的状态管理可以只写一个mutations，通过传参（Payload）判断更改内容。还是以menu管理为例，可进行下面的优化：

vuex优化后如下：

conststore=newVuex.Store({
//其他代码略

mutations:{
//优化后代码，合并changeFirstActiveMenu和changeSecondActiveMenu
changeActiveMenu(state,menuInfo){
state[menuInfo.menuHierarchy]=menuInfo.name;
}
}
});

组件js部分优化后如下：

methods:{
menuClicked(path){
//其他代码略高亮

//优化后代码：更改一级和二级菜单触发同个mutation
this.$store.commit("changeActiveMenu",{
menuHierarchy:'activeFirstMenu',
name:path,
});

this.$store.commit("changeActiveMenu",{
menuHierarchy:'activeSecondMenu',
name:path,
});

//其他代码略
},
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

详解使用vuex进行菜单管理

热门推荐

随机推荐