济南网站推广哪家好湖南网站建设平台
系列文档目录
Vue3+Vite+TypeScript安装
Element Plus安装与配置
主页设计与router配置
静态菜单设计
Pinia引入
Header响应式菜单缩展
Mockjs引用与Axios封装
登录设计
登录成功跳转主页
多用户动态加载菜单
文章目录
目录
系列文档目录
文章目录
前言
一、Header响应
二、Aside呈现
三、Main.vue调整
四、运行效果
前言
回顾上章节 介绍了Pinia store 的基本概念及其在状态管理中的作用。通过 定义 isCollapse 状态来控制菜单显示状态中的作用。
在本章节中，探讨如何通过用户交互——具体来说是点击按钮——来控制 Pinia store 中isCollapse 状态的变化。该状态的变更将直接影响应用中菜单的显示行为，实现菜单的动态收缩与展开功能。
一、Header响应
目标
• 在 Header 上添加一个按钮，用于切换 isCollapse 状态。
• 确保按钮点击事件能够触发状态变更。
步骤
1. 打开 MainHdrCont.vue 文件： 找到并打开位于 src/components/ 目录下的 MainHdrCont.vue 文件。
2. 修改模板部分： 在 <template> 部分中，添加一个按钮元素，并绑定点击事件。
3. 添加方法： 在 <script> 部分中，定义一个方法来处理按钮点击事件，该方法将切换 isCollapse 状态。
4. 更新样式（可选）： 根据需要更新样式，以确保按钮在页面上正确显示。
重点案例代码：
// 定义按钮文本，根据 store.isCollapse 的值动态设置
const bntMenuText = computed(() => {return store.isCollapse ? 'expand' : 'collapse';
});
// 定义单击事件的处理函数
function handleMenu() {