关于vuex 的模块开发和使用

1、文件结构
在这里插入图片描述
2、modules 文件内容

例子: ccc.js 文件内容如下:

// 基础配置项
const state = {aa: []
}const mutations = {setaa (state, data) {state.aa= data}
}const actions = {}
export default {namespaced: true, state,mutations,actions
}
**注意:::**
// namespaced为true的作用是告诉vuex,该模块所有的state 、mutations、actions里面的东西调用时都需要加上命名空间,这个命名空间就是该模块被improt时命名的名字。

3、getters.js 文件

const getters = {control: (state) => state.ccc.aa,// 此处为了 集合 gettees 数据 通过辅助函数使用: 注意写法 state.文件名字.参数名字(即哪个文件下的那个参数)
}
export default getters

4、index.js 文件:把state 和 getters 挂载到vuex 上

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'Vue.use(Vuex)const modulesFiles = require.context('./modules', true, /\.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => {// set './app.js' => 'app'const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')const value = modulesFiles(modulePath)modules[moduleName] = value.defaultreturn modules
}, {})const store = new Vuex.Store({modules,getters
})export default store

注意使用: 在vue文件中 引入 辅助函数
1、引入 import { mapGetters } from ‘vuex’
2、在计算属性 computed 使用 辅助函数即可,

computed: {...mapGetters(['control']), // 为getters 中的 字段名:::
}

参考:https://vuex.vuejs.org/zh/

vuex : 数据
1、state: 它便作为一个“唯一数据源 (SSOT)”而存在

2、getter: “getter”(可以认为是 store 的计算属性),第一个参数是 state,
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

3、Mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
并且它会接受 state 作为第一个参数
类似:methods:{ }
通过store.commit(‘方法名字’,参数二)进行更改 store 中的数据

4、Action: Action 类似于 mutation , 可以包含任意异步操作
Action 通过 store.dispatch 方法触发
store.dispatch(‘increment’)
使用 mapActions 辅助函数

5、Module :Vuex 允许我们将 store 分割成模块(module)

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

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

相关文章

高效编写产品规格书的秘诀与注意事项

高效编写产品规格书的秘诀:学会利用简单的工具,写出效果最佳的产品规格书。比如,你可以使用HelpLook、Markdown编辑器、LaTeX、notion等。 在快节奏的商业环境中,产品规格书是企业向市场展示产品特性和优势的重要工具。一份清晰、…

quartz整合前端vue加后端springboot

因工作需求&#xff0c;需要能修改定时的任务&#xff0c;前端vue3&#xff0c;后端是springboot 看看页面效果&#xff1a; 首先maven加上引入 <dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz</artifactId><versi…

电源配小了,是不是容易烧?是的!

电源小的话会不会容易烧毁&#xff1f; 是的。 功率电压*电流。 随着功率增大&#xff0c;电压不变&#xff0c;电流增大&#xff0c;发热量增大&#xff0c;可能会烧毁。 今天给大家推荐一款650w的电脑电源&#xff0c;不过在推荐之前&#xff0c;首先要确认自己的电脑功耗…

串行通信接口之RS232、RS485与RS422

前言 RS232&#xff0c;RS485&#xff0c;RS422都是串口通信协议家族的一员&#xff0c;那么他们有什么区别呢&#xff1f;首先让我们来了解俩个简单的知识点&#xff0c;TTL电平以及CMOS电平&#xff0c;单端传输以及差分传输。 TTL电平 TTL电平接口电路由晶体管构成&#x…

Oracle19C静默安装教程

文章目录 一、安装前的准备1、安装Linux操作系统2、配置网络源或者本地源3、hosts文件配置 二、准备安装环境1、安装依赖包2、创建oracle用户组3、配置系统内核参数4、关闭selinux5、配置oracle用户环境6、修改用户的Shell限制 三、静默安装Oracle数据库1、创建oracle安装目录2…

c++销售公司员工管理系统

定制魏:QTWZPW,获取更多源码等 目录 题目 目的 要求 回顾或复习的内容 类声明 构造函数 核心算法实现 测试与结论 添加员工 显示所有员工 保存数据到文件 完整代码 总结 题目 设计一个虚基类Staff(员工),包含编号、姓名和年龄保护数据成员以及相关的成员函数;由S…

spring MVC是如何找到html文件并返回的?

Spring MVC 搜索路径 启动一个SpringBoot项目时&#xff0c;访问http://localhost:8080&#xff0c;对于SpringMVC&#xff0c;它会默认把这段url看成http://localhost:8080/index.html&#xff0c;所以这两个url是等价的。 .html, .css, .js, .img …都是静态资源文件&#x…

前端小白的学习之路(ES6 一)

提示&#xff1a;关键字声明&#xff1a;let与const,长度单位&#xff1a;em与rem,vw与wh&#xff0c;解构赋值&#xff0c;箭头函数(简介) 目录 一、ES6介绍 二、let&const 1.let 1) 用 let 关键字声明的变量不能提前引用 2) 不允许重复声明变量 3) 可以产生块级作用…

基于Spring Boot+Vue的社区医院管理系统

末尾获取源码作者介绍&#xff1a;大家好&#xff0c;我是墨韵&#xff0c;本人4年开发经验&#xff0c;专注定制项目开发 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 一、研究背景 二…

Python文件

Python文件 1 文件与文件路径1.1 什么是文件和文件路径1.2 绝对路径1.3 相对路径 2 文件的基本操作2.1 路径检查方法2.2 目录操作方法2.3 信息获取方法 3 文件读写3.1 打开文件3.2 读取文件3.3 文件写入3.4 关闭文件3.5 示例3.6 with as 上下文语法 4 文件复制4.1 复制文件4.2 …

ubuntu20.04搭建rtmp视频服务

1.安装软件 sudo apt-get install ffmpeg sudo apt-get install nginx sudo apt-get install libnginx-mod-rtmp 2.nginx配置 修改/etc/nginx/nginx.conf文件&#xff0c;在末尾添加&#xff1a; rtmp {server {listen 1935;application live {live on;}} } 3.视频测试 本…

idea创建maven-archetype-quickstart框架无法显示src/目录

一、配置好idea中Maven目录 1、不使用idea自带Maven&#xff0c; 2、配置好Maven环境变量M2_HOME 3、修改maven中 setting.xml文件 <?xml version"1.0" encoding"UTF-8"?><settings xmlns"http://maven.apache.org/SETTINGS/1.2.0"…

【Qt】常用控件

目录 一、控件概述 二、QWidget 三、Buttons类控件 3.1 QPushButton 3.2 QRadioButton 3.3 QCheckBox 3.4 QToolButton 四、Display Widgets&#xff08;显示类控件&#xff09; 4.1 QLabel 4.2 QLCDNumber 4.3 QProgressBar 4.4 QCalendarWidget 五、Input Widge…

C#中右键通过listview来控制datagridview字段值的是否显示、显示顺序,并存储到XML中。

最终显示效果&#xff0c;如下图所示&#xff1a; datagridview开始显示通过调用XML存储的字段值及顺序来显示&#xff0c;右键调出Tools来控制显示的顺序及是否显示&#xff0c;通过加号和减号进行调整顺序。 XML存储字段值及顺序 主要代码及事件&#xff1a; 获取datagridv…

arduino ide 开发esp8266注意事项

1.引脚序列号必须是常量来定义&#xff0c;否则会无限重启。 #define p2 2 const int Pin2p2; pinMode(Pin2, OUTPUT); 2.关于wifi的模式&#xff0c;ap,sta&#xff0c;apsta三种模式的初始化必须放在void set_up(){}这个函数里&#xff0c;不能额外搞个自定义函数&#xf…

GitHub配置SSH Key(详细版本)

GitHub配置SSH Key的目的是为了帮助我们在通过git提交代码是&#xff0c;不需要繁琐的验证过程&#xff0c;简化操作流程。比如新建的仓库可以下载, 但是提交需要账号密码。 步骤 一、设置git的user name和email 如果你是第一次使用&#xff0c;或者还没有配置过的话需要操作…

鸿蒙Harmony应用开发—ArkTS-高级组件:@ohos.arkui.advanced.ComposeTitleBar(头像和单双行文本标题栏)

一种普通标题栏&#xff0c;支持设置标题、头像&#xff08;可选&#xff09;和副标题&#xff08;可选&#xff09;&#xff0c;可用于一级页面、二级及其以上界面配置返回键。 说明&#xff1a; 该组件从API Version 10开始支持。后续版本如有新增内容&#xff0c;则采用上角…

java 通过 IMetaStoreClient 取 hive 元数据信息

1 pom.xml配置&#xff0c;要与服务器上的版本要一致&#xff0c;并将hive-site.xml 文件放入resources文件夹中 <dependencies><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency>&l…

演讲嘉宾公布 | 3D音频专题论坛将于3月27日举办

一、3D音频专题论坛 3D音频技术不仅能够提供更加真实、沉浸的虚拟世界体验&#xff0c;跨越时空的限制&#xff0c;探索未知的世界。同时&#xff0c;提供更加丰富、立体的情感表达和交流方式&#xff0c;让人类能够更加深入地理解彼此&#xff0c;建立更加紧密的联系。3D音频未…

风速预测(八)VMD-CNN-Transformer预测模型

往期精彩内容&#xff1a; 时序预测&#xff1a;LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较-CSDN博客 风速预测&#xff08;一&#xff09;数据集介绍和预处理-CSDN博客 风速预测&#xff08;二&#xff09;基于Pytorch的EMD-LSTM模型-CSDN博客 风速预测&#xff…