关于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…

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…

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

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

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…

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;则采用上角…

演讲嘉宾公布 | 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…

图片编辑器中实现文件上传的三种方式和二进制流及文件头校验文件类型

背景 最近在 vue-design-editor 开源项目中实现 psd 等多种文件格式上传解析成模板过程中, 发现搞定设计文件上传没有使用 input 实现文件上传, 所以我研究了一下相关技术, 总结了以下三种文件上传方法 input 文件选择window.showOpenFilePicker 和 window.showDirectoryPicke…

何恺明重提十年之争——模型表现好是源于能力提升还是捕获数据集偏见

2011年,知名学者Antonio Torralba和Alyosha Efros提出了“数据集偏差之战”&#xff0c;他们发现机器学习模型很容易“过拟合”到特定的数据集上&#xff0c;导致在其他数据集上表现不佳。过去十年&#xff0c;随着深度学习革命的到来&#xff0c;建立多样化、大规模、全面且尽…

应急响应-Web2

应急响应-Web2 1.攻击者的IP地址&#xff08;两个&#xff09;&#xff1f; 192.168.126.135 192.168.126.129 通过phpstudy查看日志&#xff0c;发现192.168.126.135这个IP一直在404访问 &#xff0c; 并且在日志的最后几条一直在访问system.php &#xff0c;从这可以推断 …

机器学习_聚类(Clustering)

文章目录 简介K-均值算法(K_Means) 简介 你经常跟哪些人联系&#xff0c;而这些人又经常给哪些人发邮件&#xff0c;由此找到关系密切的人群。因此&#xff0c;这可能需要另一个聚类算法&#xff0c;你希望用它发现社交网络中关系密切的朋友。 K-均值算法(K_Means) K-均值是…

查看angular版本的问题The Angular CLI requires a minimum Node.js version of v18.13.

angular版本与node.js版本不匹配的问题 下载安装angular 查看版本&#xff0c;发现不匹配 安装指定版本即可 查看版本并运行