当前位置: 首页 > news >正文

「网页开发|前端开发|Vue」10 vuex模块化:将数据划分成不同modules分别管理

本文主要介绍如何使用vuex的modules将状态数据根据不同模块进行划分并分别管理以及如何使用mapGetters快速将状态管理中的数据导入成local变量。

文章目录

  • 本系列前文传送门
  • 一、场景说明
  • 二、使用modules划分不同模块
  • 三、使用Getters获取状态管理数据
    • Getter传参
    • mapGetters 辅助函数

本系列前文传送门

  • 「网页开发|前端开发|Vue」01 快速入门:快速写一个Vue的HelloWorld项目
  • 「网页开发|前端开发|Vue」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转
  • 「网页开发|前端开发|页面布局」03 学会够用的CSS,实现任意你想要的页面布局
  • 「网页开发|前端开发|Vue」04 快速掌握开发网站需要的Vue基础知识
  • 「网页开发|前端开发|Vue」05 Vue实战:从零到一实现一个网站导航栏
  • 「网页开发|前端开发|Vue」06 公共组件与嵌套路由:让每一个页面都平等地拥有导航栏
  • 「网页开发|前端开发|Vue」07 前后端分离:如何在Vue中请求外部数据
  • 「网页开发|后端开发|Flask」08 python接口开发快速入门:技术选型&写一个HelloWorld接口
  • 「网页开发|前端开发|Vue」09 Vue状态管理Vuex:让页面根据用户登录状态渲染不同内容

一、场景说明

vuex用于vue开发过程中的数据管理,但随着网站功能增多,项目规模变大,需要管理的数据也自然会越来越多。如果我们把所有的数据都放在一起,那么在后期开发过程可能会导致数据混淆(比如命名相似),或者是代码集中在一处难以维护。

所以我们可以考虑将数据根据功能或者场景划分成不同模块,比如登录模块Login,然后使用modules关键字将不同模块放入到store中。

二、使用modules划分不同模块

modules的用法其实很简单,如下:

const moduleA = {state: {name: "A",},mutations: {},actions: {},getters: {}
}const moduleB = {state: {name: "B",},mutations: {},actions: {}
}const store = new Vuex.Store({modules: {a: moduleA,b: moduleB}
})console.log(store.state.a.name) // -> `moduleA`'s state
console.log(store.state.b.name) // -> `moduleB`'s state

我们在上述代码中定义了两个不同的模块来储存不同场景的模块数据,在moduleA中变量name的值为A,在moduleB中变量name的值为B

定义好各个模块后,我们在store中放入字段名具体模块的对应关系,{a: moduleA, b: moduleB}。之后我们就可以通过store.state.a访问到a(即moduleA)中的state,通过store.state.b访问到b(即moduleB)中的state

所以我们就可以通过store.state.b.name获取到moduleBstatename字段,返回值为B

进一步,我们可以把moduleB的代码独立成文件,比如独立到moduleB.store.js中,然后导入到一个总入口,比如store.js,达到跟业务逻辑代码一样模块化的效果。

三、使用Getters获取状态管理数据

有时候我们需要基于store 中的state进行一些计算。比如我们写一个清单应用,有一个todo-list,需要对列表进行过滤并计数:

computed: {doneTodosCount () {return this.$store.state.todos.filter(todo => todo.done).length}
}

同样地,如果在多处都需要使用,那么我们要么要复制粘贴同一份代码,这让代码变得冗余;要么我们把这个计算放到store的方法中供每个地方调用,这样调用时需要使用commit()方式比较不便,并且可能因为重复计算影响性能。

所以vuex允许我们在store中定义getter(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。并且我们在访问时也可能像访问寻常变量一样访问它们。如下:

const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)}}
})

于是我们就可以通过store.getters.doneTodos获取数据,得到[{ id: 1, text: '...', done: true }]

在其他组件中,也可以直接在computed属性中获取这些数据,如下:

computed: {doneTodosCount () {return this.$store.getters.doneTodosCount}
}

Getter传参

getter也可以返回一个函数,我们用函数调用的方式来把参数传到getter的处理逻辑中,如下:

getters: {// ...getTodoById: (state) => (id) => {return state.todos.find(todo => todo.id === id)}
}

在其他组件中,就可以有如下调用:

this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

mapGetters 辅助函数

mapGetters辅助函数只有一个简单但实用的作用:将store中的getter映射到局部计算属性,如下:

import { mapGetters } from 'vuex'export default {// ...computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}
}

上述代码就可以直接帮助我们得到同名计算属性: doneTodosCountanotherGetter

如果我们希望重命名getter,则可以传入对应关系,如下:

...mapGetters({// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`doneCount: 'doneTodosCount'
})

熟悉了以上这些内容之后,基本就可以应对状态管理的常见场景,清晰地组织状态管理代码,避免随着项目规模变大后代码耦合影响开发效率。


写文不易,如果对你有帮助的话,来一波点赞、收藏、关注吧~👇

相关文章:

「网页开发|前端开发|Vue」10 vuex模块化:将数据划分成不同modules分别管理

本文主要介绍如何使用vuex的modules将状态数据根据不同模块进行划分并分别管理以及如何使用mapGetters快速将状态管理中的数据导入成local变量。 文章目录 本系列前文传送门一、场景说明二、使用modules划分不同模块三、使用Getters获取状态管理数据Getter传参mapGetters 辅助…...

苹果CMS插件-苹果CMS全套插件免费

网站内容的生成和管理对于网站所有者和内容创作者来说是一个挑战。有一些强大的工具可以帮助您轻松地解决这些问题。苹果CMS插件自动采集插件、采集发布插件以及采集伪原创发布插件,是这些工具之一。它们不仅可以极大地节省您的时间和精力,还可以提高您网…...

域环境介绍

一、概述 内网也指局域网,指的是某个区域由多台计算机互连而成的计算机组,范围通常在数千米以内,在局域网中,可以实现文件管理,应用软件共享,打印机共享、工作组内的日程安排、电子邮件和传真通信服务等&a…...

地球同步静止轨道上的中国卫星

3万6千公里地球同步静止轨道上的中国控制的卫星(包括香港属非国产平台卫星、外国属中国平台卫星),共80颗;截止到2023年8月3日,共有563颗在轨卫星。 号定位名称发射时间用途重量1141.1W中星1C(FH2C)2015.12.10DFH4平台…...

HAProxy代理TCP(使用HAProxy 为TiDB-Server 做负载均衡)

目录 一、使用HAProxy 为TiDB-Server 做负载均衡环境1、创建文件夹2、配置haproxy.cfg3、创建 docker-compose.yaml 文件haproxy.cfg 配置说明[参照官方文档](https://pingcap.com/docs-cn/v3.0/reference/best-practices/haproxy/ "参照官方文档") 一、使用HAProxy …...

全新自适应导航网模板 导航网系统源码 网址导航系统源码 网址目录网系统源码

高价值目录网导航网整站源码 | 2999元价值,最新版本源码下载推荐 1、导航网一键获取目标站SEO信息,7.5版本增加会员中心一键获取网站信息网站权重,增加小程序提交发布,全新自适应模板; 2、可设置游客提交、游客提交人工审核,会员免审提交,会员提交人工审核,VIP会员免…...

无人直播间

失败!! 采用 ffmpeg 技术进行推流 推流代码: 【需要将rtmp替换为你的推流地址】 ffmpeg -re -stream_loop -1 -i "rain.mp4" -c copy -f flv ""推流地址获取 以哔哩哔哩为例 点击下方链接 开播设置 - 个人中心 - …...

Linux 服务器防止 ssh 暴力密码登录破解之使用 fail2ban

前言,网络安全越来越重要,如何保证网站安全至关重要,在使用 Linux 服务器时,如果未设置有效安全登录屏障,每日将会有数百甚至数万次的密码暴力尝试登录,本篇章将介绍两种 Linux 登录安全防护 一&#xff1…...

第十四届蓝桥杯大赛软件赛决赛 C/C++ 大学 B 组 试题 D: 合并数列

[蓝桥杯 2023 国 B] 合并数列 【问题描述】 小明发现有很多方案可以把一个很大的正整数拆成若干正整数的和。他采取了其中两种方案,分别将他们列为两个数组 { a 1 , a 2 , ⋯ a n } \{a_1, a_2, \cdots a_n\} {a1​,a2​,⋯an​} 和 { b 1 , b 2 , ⋯ b m } \{b…...

ChatGPT必应联网功能正式上线

今日凌晨发现,ChatGPT又支持必应联网了!虽然有人使用过newbing这个阉割版的联网GPT4,但官方版本确实更加便捷好用啊! 尽管 ChatGPT 此前已经展现出了其他人工智能模型无可比拟的智能,但由于其训练数据的限制&#xff…...

DETR中的问题汇总(代码)

一、讲述一下torch.tensor()和torch.as_tensor()的区别 torch.tensor() 和 torch.as_tensor() 都是 PyTorch 中用于创建张量(Tensor)的函数,但它们有一些区别,主要涉及到张量的内存管理方式和数据拷贝。以下是它们的主要区别&…...

华为云云耀云服务器L实例评测|使用华为云耀云服务器L实例的CentOS部署Docker并运行Tomcat应用

目录 前言 步骤1:登录到华为云耀云服务器L实例 步骤2:安装Docker 并验证Docker安装 步骤3:拉取Tomcat镜像并运行Tomcat容器 步骤4:放行8080端口 步骤5:访问tomcat 步骤6:管理Tomcat容器 小结 前言 …...

Java基础---第八篇

系列文章目录 文章目录 系列文章目录一、a=a+b与a+=b有什么区别吗?二、try catch finally,try里有return,finally还执行么?三、Excption与Error包结构一、a=a+b与a+=b有什么区别吗? += 操作符会进行隐式自动类型转换,此处a+=b隐式的将加操作的结果类型强制转换为持有结果…...

(附源码)springboot体检预约APP 计算机毕设16370

目 录 摘要 1 绪论 1.1开发背景 1.2研究现状 1.3springboot框架介绍 1.4论文结构与章节安排 2 Springboot体检预约APP系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 系统流程分析 2.2.1 数据添加流程 2.2.2 数据…...

Spring的注解开发-@Component的三个衍生注解

由于JavaEE开发是分层的(三层架构体系,控制层、服务层、持久层),为了每层Bean标识的注解语义化更加明确,Component又衍生出以下三个注解 注解用途Repository(仓库)标识持久层(DAO&am…...

无线WIFI工业路由器可用于楼宇自动化

钡铼4G工业路由器支持BACnet MS/TP协议。BACnet MS/TP协议是一种用于工业自动化的开放式通信协议,被广泛应用于楼宇自动化、照明控制、能源管理等领域。通过钡铼4G工业路由器的支持,可以使设备间实现高速、可靠的数据传输,提高自动化水平。 钡…...

基于长短期神经网络铜期货价格预测,基于LSTM的铜期货价格预测,LSTM的详细原理

目录 背影 摘要 代码和数据下载:基于长短期神经网络的铜期货开盘价格预测,基于长短期神经网络的铝价格期货开盘价预测(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/download/abc991835105/88230626 LSTM的基本定义 LSTM实现的步骤 基于长短期神经网络LSTM…...

300元开放式耳机推荐哪个、最值得入手的开放式耳机推荐

开放式耳机成为今年耳机界的主流了,如果你还不曾体验过开放式耳机,那真的是太OUT了!相对于传统的入耳式耳机对听力的损伤,开放式耳机有着很长远的益处,能够很好的保护听力。随着技术的成熟,开放式耳机也在音…...

嵌入式学习笔记(37) S5PV210的PWM定时器

7.3.1为什么叫PWM定时器 (1)叫定时器说明它本质上的原理是定时器。 (2)叫PWM定时器,是因为这个定时器天然是用来产生PWM波形的。 7.3.2 PWM定时器介绍 (1)S5PV210有5个PWM定时器。其中0、1、2、3各自对应一个外部GPIO,可以通过这些对应的GPIO产生PWM…...

python工具-base64-zip-json

python工具-base64-zip-json # 先 base64 解码,再 zip 解码,再打印 json 内容,支持多个字符串解码import sys import base64 import zlib import jsondef enc_json_zip_base64(input_data):json_object json.loads(input_data)zip_data zl…...

Centos 7安装pm2 , 操作等常用命令

Centos 7安装pm2 1、首先需要安装node,node安装教程前一篇已经说了,是安装pm2 [rootlocalhost ~]# npm install -g pm2 2、pm2 命令参考 复制代码 2.1 启动进程/应用 pm2 start bin/www 或 pm2 start app.js 2.2 重命名进程/应用 pm2 start app.js -…...

vue 实现弹出菜单,解决鼠标点击其他区域的检测问题

弹出菜单应该具有的功能,当鼠标点击其他区域时,则关闭该菜单。 问题来了,怎么检测鼠标点击了其他区域而不是当前菜单? 百度“JS检测区域外的点击事件”,会发现有很多方法,有递归检测父元素,有遍…...

经典网络解(三) 生成模型VAE | 自编码器、变分自编码器|有监督,无监督

文章目录 1 有监督与无监督2 生成模型2.1 重要思路 3 VAE编码器怎么单独用?解码器怎么单独用?为什么要用变分变分自编码器推导高斯混合模型 4 代码实现 之前我们的很多网络都是有监督的 生成网络都是无监督的(本质就是密度估计)&a…...

gif怎么转换成视频MP4?

gif怎么转换成视频MP4?GIF动图已成为一种风靡网络的流行的特殊图片文件,其循环播放和逐帧呈现的特点使其在社交媒体、聊天应用等场合广泛应用,平时我们进行群聊是,大家总会一些gif动态表情的出现而感觉非常的开行,gif动…...

标准化、逻辑回归、随机梯度参数估计

机器学习入门 数据预处理: 将?替换为缺失值 data data.replace(to_replace"?",valuenp.nan)丢掉缺失值 data.dropna(how"any) #howall删除全是缺失值的行和列 #haowany删除有缺失值的行和列将数据集划分成测试集和训练集 data[colu…...

【数据结构】【C++】封装哈希表模拟实现unordered_map和unordered_set容器

【数据结构】&&【C】封装哈希表模拟实现unordered_map和unordered_set容器 一.哈希表的完成二.改造哈希表(泛型适配)三.封装unordered_map和unordered_set的接口四.实现哈希表迭代器(泛型适配)五.封装unordered_map和unordered_set的迭代器六.解决key不能修改问题七.实…...

26967-2011 一般用喷油单螺杆空气压缩机

声明 本文是学习GB-T 26967-2011 一般用喷油单螺杆空气压缩机. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了一般用喷油单螺杆空气压缩机(以下简称"单螺杆空压机")的术语和定义、型号、基本 参数、要求、试验方法、…...

Opengl之模板测试

当片段着色器处理完一个片段之后,模板测试(Stencil Test)会开始执行,和深度测试一样,它也可能会丢弃片段。接下来,被保留的片段会进入深度测试,它可能会丢弃更多的片段。模板测试是根据又一个缓冲来进行的,…...

iPhone苹果手机复制粘贴内容提示弹窗如何取消关闭提醒?

经常使用草柴APP查询淘宝、天猫、京东商品优惠券拿购物返利的iPhone苹果手机用户,复制商品链接后打开草柴APP粘贴商品链接查券时总是弹窗提示粘贴内容,为此很多苹果iPhone手机用户联系客服询问如何关闭iPhone苹果手机复制粘贴内容弹窗提醒功能的方法如下…...

释放潜力:人工智能对个性化学习的影响

人工智能有潜力通过使个性化学习成为一种实用且可扩展的方法来彻底改变教育。它使教育工作者能够满足每个学生的独特需求,促进参与并提高整体学习成果。然而,必须解决道德问题,并确保技术仍然是教育工作者手中的工具,为学生创造更…...

html怎么做静态网站/营销网站方案设计

饼图 饼图比较好看&#xff0c;但是它数据的呈现型不如条形图&#xff0c;所以多数的统计学家都不推荐饼图 饼图可以通过pie()函数创建其格式为 pie(x,labels) x是一个非负的数值向量 labels是x的标签 例子1简单的饼图 slices <- c(10,12.4,16,8) lbls <- c("US&qu…...

怎么样做微信公众号/东莞seo网络培训

&#xfeff;&#xfeff;Java高级特性之枚举学习总结 在Java SE5之前&#xff0c;我们要使用枚举类型时&#xff0c;通常会使用static final 定义一组int常量来标识&#xff0c;代码如下 public static final int MAN 0; public static final int WOMAN 1; 相信很多小伙伴…...

网站ftp根目录/百度广告推广费用

springboot利用druid和mybatis批量数据写入clickhouse时&#xff0c;刚开始的时候&#xff0c;完全按照mysql的写法&#xff0c;出现无法写入的问题。经过不断的尝试&#xff0c;发现所使用的驱动包&#xff0c;驱动类配置以及sql写法上都需要特别注意&#xff0c;不然批量写入…...

新浪微博做wordpress图床/上海自媒体推广

要想把日语翻译做好&#xff0c;既要学会捕捉关键词句&#xff0c;有良好地逻辑思维&#xff0c;又要具备一定的翻译技巧。下面小编给大家介绍一些常用的日语翻译技巧&#xff0c;欢迎阅读学习!常用的日语翻译技巧一、反译日语句子中经常喜欢用双重否定来表示肯定&#xff0c;这…...

国外云服务器哪个好/深圳seo优化推广公司

【前言】树的遍历&#xff0c;根据访问自身和其子节点之间的顺序关系&#xff0c;分为前序&#xff0c;后序遍历。对于二叉树&#xff0c;每个节点至多有两个子节点&#xff08;特别的称为左&#xff0c;右子节点&#xff09;&#xff0c;又有中序遍历。由于树自身具有的递归性…...

北京网站建设哪家便宜/郑州百度推广开户

事务管理方式 在Spring中&#xff0c;事务有两种实现方式&#xff0c;分别是编程式事务管理和声明式事务管理两种方式。 编程式事务管理&#xff1a; 编程式事务管理使用TransactionTemplate或者直接使用底层的PlatformTransactionManager。对于编程式事务管理&#xff0c;spr…...