【vue2每日小知识】实现store中modules模块的封装与自动导入

news/2024/3/29 7:37:49/文章来源:https://blog.csdn.net/m0_61118311/article/details/129179354

1d43f75f092a4050a8ce31e2d85f6868.gif

🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:省去我们store仓库中分模块时的需要每次导入index的问题

目录

【前言】在store中如何简化我们的模块导入进index的操作?

一、创建我们的模块名

 二、在我们的index中使用require.context()方法

1.require.context()方法介绍

2.引入我们的数据源

3.用方法来提取修改我们的数据

4.数据的整合

 三、效果查看


【前言】在store中如何简化我们的模块导入进index的操作?

我们在平常使用vuex存储我们公共数据资源的时候,如果将所有的共享数据都统一的写在store文件夹下的index中,那么这样的话我们的共享数据可能会非常的多,处理数据的时候也不方便处理。因此我们通常是将我们的共享数据按照我们的模块来进行划分。平常的划分模式是直接通过import引入到index达到store仓库中实现数据共享的问题。

本文阅读完可实现我们的modules中书写的各模块会自动导入到我们的store的index文件中

http://t.csdn.cn/bD5Ml关于vuex的知识可查看:http://t.csdn.cn/bD5Ml


一、创建我们的模块名

 store/modules/menu等等(本文演示模块为下图所示)

有app、menu、settings、user四个模块

 

 二、在我们的index中使用require.context()方法

1.require.context()方法介绍

参数有三个分别为:

  1.  要搜索的文件夹路径
  2. 是否开启递归搜它的子目录
  3. 正则的匹配

理论结束,开始我们的实操

2.引入我们的数据源

 我们先查看一下我们调用这个方法我们打印的是什么?

 发现req就是我们写的这个方法,req.keys()为我们路径下符合条件的对象构成的数组

3.用方法来提取修改我们的数据

 控制台查看我们打印的数据

 这样我们就提取出来了我们的模块名(mName),与我们所有的模块(map)注意我们的每项数据在default中

4.数据的整合

开始创建一个对象来接收我们的数据

可以看到我们这就提出出来了我们的数据,以模块名为键,以各模块的内容为值

 随后直接导入到store中即可

 三、效果查看

 

 我们在页面访问可获取的我们存放在vuex中的值:

 【上述我们的index源代码】

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)
const req = require.context('./modules', false, /\.js$/)
console.log(req, 'req')
console.log(req.keys(), 'req.keys()')// 模块名的数组// 打印出模块名
const mName = req.keys().map(item => item.split('./')[1]).map(item => item.split('.js')[0])
console.log(mName, 'mName')
console.log(req.keys().map(req), 'map')// 所有的modules组成的列表// 遍历模块添加到obj中
const obj = {}
const mMoudle = req.keys().map(req)mName.forEach((item, index) => {obj[item] = mMoudle[index].default// 每一个对象
})
console.log(obj, 'obj')const store = new Vuex.Store({modules: obj,
})export default store

 以上便是我们实现自动封装我们modules数据的方法啦!

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

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

相关文章

ELK日志分析--Filebeat

ELK架构 Filebeat简介 Filebeat安装 Filebeat简单使用 专用日志搜集模块 案例模块-Nginx 模块 重读日志文件 使用Processors(处理器)过滤和增强数据 1.ELK架构 2.Filebeat简介 可以使用 Filebeat 收集各种日志,之后发送到指定的目标系统上,但是同…

软件测试面试题 —— 整理与解析(1)

😏作者简介:博主是一位测试管理者,同时也是一名对外企业兼职讲师。 📡主页地址:🌎【Austin_zhai】🌏 🙆目的与景愿:旨在于能帮助更多的测试行业人员提升软硬技能&#xf…

【华为OD机试真题】用 C++ 实现 - 数字加减游戏

最近更新的博客 华为OD机试 - 入栈出栈(C++) | 附带编码思路 【2023】 华为OD机试 - 箱子之形摆放(C++) | 附带编码思路 【2023】 华为OD机试 - 简易内存池 2(C++) | 附带编码思路 【2023】 华为OD机试 - 第 N 个排列(C++) | 附带编码思路 【2023】 华为OD机试 - 考古…

程序员如何发展第二职业?这几种副业方式超赚钱

很多程序员曾表示,虽然月薪一两万,但有时候还是会焦虑。 尤其是遇上了年初裁员年底裁员这样的就业环境,焦虑就会逐步放大,这时候副业赚钱的重要性就体现出来了。 发展第二职业,可以让程序员们增加抗风险能力&#xf…

数据结构-考研难点代码突破(树型查找 - 红黑树(RBT)插入流程图,删除)

文章目录1. 红黑树的定义和性质红黑树的插入操作流程红黑树的删除(了解)1. 红黑树的定义和性质 红黑树查找与删除的效率和AVL树相同。 但是因为AVL树在插入或删除节点可能破坏AVL树结构,而重新调整树的开销大。所以引出了红黑树。 红黑树的…

【Jmeter】ForEach控制器

一、什么是ForEach控制器 ForEach控制器是遍历某个数组读取不同的变量值,来控制其下的采样器或控制器执行一次或多次。而这个数组可以是用户自定义变量,也可以是从前面接口请求中提取到需要的数据,然后进行遍历循环。 二、ForEach控制器相关…

技能提升:Python技术应用工程师职业技能提升

职业技术培训-Python技术应用工程师分为高级培训班、中级培训班及初级培训班。 Python是一种跨平台的计算机程序设计语言,是一个高层次的结合了解释性、编译性、互动性和面向对象的语言。最初被设计用于编写自动化脚本Shell(适用于Linux操作系统&#xf…

Linux PWM 开发指南

Linux PWM 开发指南 1 概述 1.1 编写目的 介绍 PWM 模块的详细设计方便相关人员进行 PWM 模块的代码设计开发。 1.2 使用范围 适用于 Linux-3.10,linux-4.4 和 Linux-4.9 内核,Linux-5.4 内核。 1.3 相关人员 PWM 驱动的开发人员/维护人员等 2 术…

数据库系统概论——绪论

1、绪论 1.1、数据库系统概述 数据库系统的构成示意图 1.1.1、数据库系统基本概念 基本概念:数据、数据库、数据库管理系统和数据库系统 1)数据(data) 定义:描述事物的符号记录称为数据数据是数据库中存储的基本对象…

中科检测赴中科院广州电子CASAIM开展座谈会,围绕3D打印、三维扫描和精密测量展开深入交流

2月9日,中科检测技术服务(广州)股份有限公司(简称:中科检测)一行到访中科院广州电子技术有限公司,参观广东省增材制造工程实验室和三维扫描及精密测量重点实验室,就3D打印、三维扫描和精密测量相关技术内容…

NTP同步时钟为医院提供标准的时间信号

NTP同步时钟应用于城市重要公共领域,如车站、学校、医院、等。NTP同步时钟可提供准确的公众时间,为人们的日常生活提供便利,避免了因时钟不准确而带来的不便。NTP同步时钟采用智能模块化设计,与同类产品相比,更突出了安…

JavaScript Web API实战:7个小众技巧让你的网站瞬间提升用户体验

随着技术的日新月异,为开发人员提供了令人难以置信的新工具和API。但据了解,在100 多个 API中,只有5%被开发人员积极使用。 让我们来看看一些有用的Web API,它们可以帮助您将网站推向月球! 1、 截屏接口 Screen Capt…

ELK日志分析--Logstash

Logstash简介 Logstash安装 测试运行 配置输入和输出 使用Geoip过滤器插件增强数据编辑 配置接收 Beats 的输入 1.Logstash简介 Logstash管道具有两个必需元素input和output,以及一个可选元素filter。输入插件使用来自源的数据,过滤器插件根据你的…

shell的测试语句

一、shell的条件测试语句 在写shell脚本时,经常遇到的问题就是判断字符串是否相等,可能还要检查文件状态或进 行数字测试,只有这些测试完成才能做下一步动作。 1.1、shell脚本中的条件测试如下: 1、文件测试 2、字符串测试 3、数…

《计算机组成与系统结构(第二版) 裘雪红 李伯成 西安电子科技大学出版社》课后习题答案(带解析)(三)

声明:此系列答案配套《计算机组成与系统结构(第二版) 裘雪红 李伯成 西安电子科技大学出版社》一书相关内容。所有内容为博主个人编辑,仅作参考学习交流之用,转载请注明出处。如发现错误,请联系博主及时勘误…

java JMM 内存屏障

内存屏障的目的 每个CPU都会有自己的缓存(有的甚至L1,L2,L3),缓存的目的就是为了提高性能,避免每次都要向内存取。但是这样的弊端也很明显:不能实时的和内存发生信息交换,分在不同CPU执行的不同线程对同一…

基于SPI的增强式插件框架设计

很久之前,为了诊断线上的问题,就想要是能有工具可以在线上出问题的时候,放个诊断包进去马上生效,就能看到线上问题的所在,那该是多么舒服的事情。后来慢慢的切换到 java 领域后,这种理想也变成了现实&#…

【selenium 自动化测试】如何搭建自动化测试环境,搭建环境过程应该注意的问题

最近也有很多人私下问我,selenium学习难吗,基础入门的学习内容很多是3以前的版本资料,对于有基础的人来说,3到4的差别虽然有,但是不足以影响自己,但是对于没有学过的人来说,通过资料再到自己写的…

2023年PMP考试应该注意些什么?

首先注意(报考条件) 2023年PMP考试报名流程: 一、PMP英文报名: 英文报名时间无限制,随时可以报名,但有一年的有效期,所以大家尽量提前报名,在英文报名有效期内进行中文报名。 英…

深度卷积对抗神经网络 进阶 第三部分 GANs Unpaired Translation with Cycle GAN 模型

非配对的图像转换应用 Unpaired Image-to-Image Translation Unpaired image-to-image translation 主要用于学习两组图像之间的对应关系,检查和寻找两堆数据中的共同内容(content)以及每堆独有的特点(style)。而这个…