Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态
使用 Vuex 管理应用状态
1. 引入背景
像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改,导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷新导航菜单样式。后续类似的组件状态共享还会有许多。为了解决组件间状态的共享,增加组件交互的易用性,我们引入 vuex 专门管理应用状态。
2. 安装依赖
执行以下命令,安装 vuex 依赖。
yarn add vuex
3. 添加配置
3.1 添加 Store
在 src 目录下,新建一个 store 目录,专门管理应用状态,在 index.js 中创建 store。
index.js
import Vue from 'vue' import vuex from 'vuex'Vue.use(vuex);const store = new vuex.Store({state:{collapse:false // 导航栏收缩状态 },mutations:{collapse(state){ // 改变收缩状态state.collapse = !state.collapse;}} })export default store
3.2 引入 Store
在 main.js 引入 store
4. 使用 Store
4.1 修改状态
在原先响应折叠导航栏的函数内替换原有逻辑,改为发送提交请求来改变收缩状态。
4.2 获取状态
在原先引用 collapse 的地方改为引用 $store.state.collapse 。
根据收缩状态绑定不同样式,就可以实现导航菜单栏根据收缩状态更新页面效果了。
MenuBar.vue
HeadBar.vue
Main.vue
5. 测试效果
进入主页,点击收缩按钮,效果如下图。
Store 模块化
现在我们的状态都维护在index.js,状态一多就会出现臃肿,这里可以根据需求进行模块化。
1. 文件结构
模块化后的文件结构
2. Store 封装
改写index.js,引入模块化,这里把之前的状态抽取到AppStore,后续可能还会有UserStore、MenuStore之类的。
import Vue from 'vue' import vuex from 'vuex'Vue.use(vuex);import AppStore from './modules/AppStore.js';const store = new vuex.Store({modules: {app: AppStore // 其他 } })export default store
AppStore.js
export default {state: {appName: "I like Kitty", // 应用名称collapse:false // 导航栏收缩状态 },getters: {collapse(state){// 对应着上面statereturn collapse;}},mutations: {collapse(state){ // 改变收缩状态state.collapse = !state.collapse;}},actions: {} }
3. 状态引用
在引用 store 状态的地方加上模块名称
如果一个文件内引用过多,嫌引用路劲又长又臭,可以使用 mapState、mapGetter、mapActions 工具进行简化。
如 MenuBar.vue 中引用较多,我们用 mapState 简化对属性的引用。如下图,给状态赋予别名。
引用状态的地方就可以直接用上面定义的别名进行访问了。
mapState、mapGetter、mapActions 工具对于文件内大量又长又臭的状态引用时非常有用,可以适当的运用。
封装收缩组件
1. 组件封装
如下图,新建目录和文件,封装收缩组件展开导航栏组件。
Hamburger/index.vue
<template><svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"p-id="1694"></path></svg> </template><script> export default {name: 'hamburger',props: {isActive: {type: Boolean,default: false},toggleClick: {type: Function,default: null}} } </script><style scoped> .hamburger {display: inline-block;cursor: pointer;width: 20px;height: 20px;transform: rotate(90deg);transition: .38s;transform-origin: 50% 50%; } .hamburger.is-active {transform: rotate(0deg); } </style>
2. 引入组件
HeadBar.vue 中引入组件
响应函数,通过 store 修改收缩状态
3. 测试效果
进入主页,效果如下图。
封装面包屑组件
将面包屑从主内容中抽取出来,封装成 BreadCrumb。
BreadCrumb/index.vue
<template><el-breadcrumb separator="/" class="breadcrumb"><el-breadcrumb-item v-for="item in $route.matched" :key="item.path"><a href="www.baidu.com">{{ item.name }}</a></el-breadcrumb-item></el-breadcrumb> </template><script> export default {data() {return {};},methods: {},mounted() {} }; </script><style scoped lang="scss"> .breadcrumb {padding: 10px; border-color: rgba(38, 86, 114, 0.2);border-bottom-width: 1px;border-bottom-style: solid;// background: rgba(180, 189, 196, 0.1); } </style>
main.js 中 引入
动态换肤
1. 功能背景
之前的动态换肤,只能刷新 Element 相关组件的颜色,而如果我们希望在换肤的时候我们的头部区域也同步改变就需要做进一步的修改了。接下来,我们就实现这个功能,赋予换肤组件在更新 Element 组件颜色的时候,可以定制插入一些自定义的操作。
2. 改进ThemePicker
修改 ThemePicker 插件, 绑定导出函数和主题色参数。
3. 父组件函数绑定
在父组件绑定处理函数,增加自定义同步更新逻辑。
这里是切换主题颜色的时候,设置 store 状态,保存共享主题色,这样其他绑定主题色的组件都可以自动更新了。
4. 添加共享状态
在 store 中定义主题色相关的状态。
5. 共享状态引入
在要使用的组件处引入主题色状态。
组件样式绑定主题色状态,主题色并更时,更新组件背景色样式。
6. 测试效果
进入主页,点击动态换肤取色器,换肤效果如下。
源码下载
后端:https://gitee.com/liuge1988/kitty
前端:https://gitee.com/liuge1988/kitty-ui.git
作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。
转载于:https://www.cnblogs.com/xifengxiaoma/p/9558290.html
Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态相关推荐
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
- Vue + Element UI 实现权限管理系统 前端篇(六):更换皮肤主题
自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...
- Vue + Element UI 实现权限管理系统 前端篇(九):接口格式定义
接口请求格式定义 前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟. 接口定义遵循几个规范: 1. 接口按功能模块划分. 系统登录:登录相关接口 用户管理: ...
- Vue + Element UI 实现权限管理系统:页面权限控制(菜单 + 按钮)
权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...
- Vue + Element UI 实现权限管理系统(更换皮肤主题)
自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- vue+element ui 项目 后台管理系统
前端界面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
最新文章
- 《Adobe Premiere Pro CS5经典教程》——2.9 用Media Browser查找素材
- 2018.1.9 区块链论文翻译
- quadprog函数的介绍和应用,二次规划函数
- 佛祖保佑代码无bug图片_程序员都有哪些奇趣的代码注释,细思极恐
- CCF201604-3 路径解析(解法三)(90分)(废除!!!)
- 【转】POJ分类很好很有层次感
- mix2线刷开发板救砖_小米MIX2线刷刷机教程_小米MIX2第三方rom包_线刷救砖教程
- 解三对角矩阵以及循环三对角矩阵方程的数值计算方法
- win的反义词_小学英语常见的120对反义词大全,聪明的小升初家长快来收藏学习...
- 【Mysql 错误定位】语法错误
- 卖西瓜问题(Java经典编程案例)
- 网盘上传文件服务器失败原因,win7系统在百度网盘上传文件一直失败的解决方法...
- Class34--猜字游戏
- [TOG2022]DCT-Net: Domain-Calibrated Translation for Portrait Stylization
- 如何在笔记本上设置wifi热点(菜鸟篇)
- java eden_java eden 大小
- 50岁学python合适吗_中年的你是否适合学习PYTHON
- 移动端微信接收到CAD图纸,如何打开?
- 网络安全工程师需要考什么证吗?
- k8s+jenkins中使用自定义maven镜像
热门文章
- maven工程中添加scala-library并非idea scala插件
- go程序执行流程分析
- 编写Dockerfile增强centos镜像:安装vim 和net-tools
- scala逻辑运算符的一览图和代码案例
- Linux wc指令统计文件信息
- JDBC的CRUD操作之PreparedStatement的保存操作
- Java一个对象的内存运行流程图
- idea 中javax.servlet.http.HttpServlet包导不进来
- 关于struts,spring,hibernate的几个问题
- 【示例】solr添加文档/删除文档/简单查询/多条件查询