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. 测试效果

进入主页,点击动态换肤取色器,换肤效果如下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/70074.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

postgresql 安装教程

postgresql 安装教程 本文以window 15版本为教程 文章目录 postgresql 安装教程1.下载地址2.以管理员身份运行3.选择安装路径&#xff0c;点击Next4.选择组件&#xff08;默认都勾选&#xff09;&#xff0c;点击Next5.选择数据存储路径&#xff0c;点击Next6.设置超级用户的…

指针和字符数组笔试题及其解析(第三组)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 第三组笔试题 char *p "abcdef";printf("%d\n", sizeof(p)); printf("%d\n", sizeof(p1)); printf("%d\n", sizeof(*p)); printf("%d\n", sizeof(p[0])); printf("%…

Android逆向学习(四)app修改smali函数跳过弹窗广告,等待广告,更新提醒

Android逆向学习&#xff08;四&#xff09;app修改smali函数跳过弹窗广告&#xff0c;等待广告&#xff0c;更新提醒 一、写在前面 这是吾爱破解课程的第三个练习&#xff0c;我在写这篇博客时遇到了vscode插件bug&#xff0c;已经想办法联系原作者了&#xff0c;希望能够尽…

Android WIFI工具类 特别兼容Android12

直接上代码&#xff1a; package com.realtop.commonutils.utils;import android.annotation.SuppressLint; import android.bluetooth.BluetoothDevice; import android.bluetooth.BluetoothManager; import android.bluetooth.BluetoothProfile; import android.content.Con…

Jmeter 三种提取方式 —— 关联实例

当请求之间有依赖关系&#xff0c;比如一个请求的入参是另一个请求返回的数据&#xff0c;这时候就需要用到关联处理 Jmeter中常用的关联方法&#xff1a; 正则表达式提取器、XPath提取器、JSON提取器​​​​​​ regex: (.*?)-(.*?)-(.*?)\n.: 匹配除换行符&#xff08;…

C# 获取Json对象中指定属性的值

在C#中获取JSON对象中指定属性的值&#xff0c;可以使用Newtonsoft.JSON库的JObject类 using Newtonsoft.Json.Linq; using System; public class Program { public static void Main(string[] args) { string json "{ Name: John, age: 30, City: New York }"; …

python实现对excel表中的某列数据进行排序

如下需要对webCms中的B列数据进行升序排序&#xff0c;且不能影响到其他列、工作表中的数据和格式。 import pandas as pd import openpyxl from openpyxl.utils.dataframe import dataframe_to_rows# 读取 Excel 文件 file_path 1.xlsx sheet_name webCms# 读取 Excel 文件并…

pc-签字画板vue-esign的使用

使用的是vue-esign组件 npm install vue-esign 首先下载组件在main.js中引入vue-esign&#xff0c;并且挂载 import { createApp } from vue; import App from ./App.vue; const app createApp(App);import vueEsign from vue-esign app.use(vueEsign ) 页面使用&#xff0…

mysql场景题:最近7天连续3天登陆用户,字段,id,date(已去重)

1.最近7天连续3天登陆用户&#xff0c;字段&#xff0c;id&#xff0c;date&#xff08;已去重&#xff09; 思路&#xff1a; lag对时间开窗&#xff08;注意时间得转换为时间戳&#xff08;int类型才可以添加后续条件&#xff09;&#xff0c;跳行为2&#xff08;连续3天&am…

uniapp移动端地图,点击气泡弹窗并实现精准定位

记录移动端地图map组件的使用 需求记录&#xff1a; 移动端地图部分需要展示两个定位点&#xff0c;上报点及人员定位点。通过右上角的两个按钮实现地图定位。点击对应定位气泡&#xff0c;弹出定位点的信息。 效果图如下&#xff1a; map在nvue中的使用。直接用nvue可以直接…

JavaScript闭包漏洞与修补措施

请先看下面一段代码 var obj (function () {var sonObj {a: 1,b: 2}return {get: function (v) {return sonObj[v]}}})()可以看出,这是一段很典型的js闭包代码,可以通过obj调用get方法传一个参数,如果传的是a就可以得到闭包内的对象sonObj.a var obj (function () {var sonO…

edge浏览器无法登录账号!Microsoft 帐户无法登录!

种种原因&#xff0c;将笔记本重置了&#xff0c;重新下载装了系统&#xff0c;但是麻烦也来了&#xff0c;Microsoft 帐户无法登录&#xff01;edge浏览器无法登录账号&#xff0c;之前的保存的密码&#xff0c;加星的书签页同步不过去&#xff0c;这不完犊子了&#xff01;干…

Redis7入门概述

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…

微信小程序引入地图

微信小程序引入地图 <map longitude"{{markers[0].longitude}}" scale"11" latitude"{{markers[0].latitude}}" markers"{{markers}}" style"width: 100%; height:81vh;"></map>1.可以直接在页面设置map标签显…

谈谈你的未来吧(励志成为CV算法工程师的第一天)

谈谈你的未来吧&#xff08;励志成为CV算法工程师的第一天&#xff09; 前言一、不知道该怎么选择的大一&#xff0c;大二二&#xff0c;好像知道未来路的大三三&#xff0c;谈谈博主我吧四&#xff0c;朝着一个方向前进吧 前言 仅以此篇记录我的学习经过&#xff0c;大家有什…

解决WebSocket通信:前端拿不到最后一条数据的问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

服务器上装conda

服务器从0搭建-【anaconda3cudacudnnconda环境创建修改conda源】_bashrc中的conda initialize和cuda_冲上云霄&#xff01;的博客-CSDN博客

C# 子类如何访问子类的方法(同一父类)

在继承关系中&#xff0c;子类可以通过创建另一个子类的对象来访问其方法。下面是一个示例&#xff0c;展示了子类如何访问另一个子类的方法&#xff1a; public class Animal {public virtual void Speak(){Console.WriteLine("我是动物。");} }public class Cat :…

CentOS7设置虚拟内存

1、 查看服务器内存 > free -mhtotal used free shared buff/cache available Mem: 3.7G 1.4G 128M 64M 2.1G 1.9G Swap: 0 0 02、创建虚拟内存 合理规划和设计 Linux…

python学习之【深拷贝】

#我的编程语言学习笔记# 前言 上一篇文章python学习之【浅拷贝】 学习了python中的浅拷贝相关内容&#xff0c;这篇文章接着学习深拷贝。 简单回顾 浅拷贝只拷贝浅层元素&#xff0c;深层元素的内存地址不改变 &#xff1b;当对拷贝产生的新的对象的浅层元素进行更改时&…