Vue-54、Vue技术vuex中四个map使用(mapState、mapGetters、mapActions、mapMutations)

1、mapState方法:用于帮助我们映射state中的数据为计算属性

computed:{//借助mapstate生成计算属性,从state中读取数据(对象写法)...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapstate生成计算属性,从state中读取数据(数组写法)...mapState(['sum','school','subject']),
}

2、mapGetters:用于帮助我们映射getters中的数据为计算属性

computed:{//借助mapGetters生成计算属性,从getters中读取数据(对象写法)...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性,从getters中读取数据(数组写法)...mapGetters(['bigSum']),
}

3、mapActions方法:用于帮助我们生成与action对话的方法,即:包含$store.dispatch(xxx)的函数

methods:{//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)...mapActions({addSumOdd:'SumOdd',addSumWait:'jiaWait'})//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法)...mapActions(['SumOdd','jiaWait'])}

4、mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

methods:{//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)...mapMutations({addSum:'JIA',reduceSum:'JIAN'}),//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(数组写法)...mapMutations(['JIA','JIAN']),
}

注意:mapActions与mapMutations使用时,若需要传递参数:在模板中绑定事件时传递好参数,否则参数就是事件对象。

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

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

相关文章

PyCharm2023.3.2配置conda环境

重点在于Path to conda这一步,需要找到conda.bat这个文件,PyCharm才能识别出现有的conda环境。

Spring Native 解放 JVM

一、Spring Native 是什么 Spring Native可以通过GraalVM将Spring应用程序编译成原生镜像,提供了一种新的方式来部署Spring应用。与Java虚拟机相比,原生镜像可以在许多场景下降低工作负载,包括微服务,函数式服务,非常…

第四节课[XTuner微调]作业

文章目录 前言作业基础作业-XTuner InternLM-Chat 个人小助手认知微调实践 前言 XTuner 做在第三节课LangChain作业之前,因为第三节课没想好找哪个领域,等第三节课作业做了一起部署。 作业 基础作业-XTuner InternLM-Chat 个人小助手认知微调实践 然…

数据采集接口分类:数据采集、数据的采集有哪些?

中国的人工智能会面临着前所未有的发展机遇,她也将会以真正解决人类钢需载入史册,我们也期待着在天津跟在座的各位合作伙伴共同努力,真正的用人工智能建设美好世界。 API接口数据采集 主流电商数据采集 一、 什么是数据采集 确立一个算法模…

什么是Vue样式穿透以及常用的实现方法

在Web前端开发中,样式穿透是一个重要的主题,它可以帮助我们更好地定制化组件样式,提升用户体验。本文将为您介绍Vue中样式穿透的概念,以及几种常用的实现方法,希望对您的前端开发工作有所帮助。 什么是样式穿透&#…

qt学习:串口

头文件 #include <QSerialPort> #include <QSerialPortInfo> 模块 QT core gui serialport 编程步骤 配置一个ui界面&#xff0c;五个QComboBox和一个按钮和一个QTextEdit 添加一个成员 private:QSerialPort *serial; 在构造函数中初始化ui端口列表和…

基于JAVA的中学生家校互联系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 学生管理模块2.2 课堂表现模块2.3 考试成绩模块2.4 家校留言模块2.5 校园通知模块 三、系统设计3.1 用例设计3.2 实体类设计3.2.1 课堂表现实体类设计3.2.2 考试成绩实体类设计3.2.3 家校留言实体类设计3.2.4 校园通知实…

ORB-SLAM3运行自制数据集进行定位教程

目前手上有一个特定的任务&#xff0c;做应急救援的视觉SLAM&#xff0c;目前公共数据集比较少&#xff0c;考虑自建数据集&#xff0c;从网络上爬虫火灾、地震的等手机录制的视屏&#xff0c;应用一些现有成熟ORB-SLAM3系统到这个数据集上看效果&#xff0c;然后根据效果得到一…

14.3 OpenGL图元装配和光栅化:抗锯齿

抗锯齿 Antialiasing 多采样是一种在OpenGL中实现所有图形元素&#xff08;点、线和多边形&#xff09;抗锯齿的技术。其原理是在每个像素位置上对几何体进行多次采样&#xff0c;然后将这些颜色样本值合并成一个可显示的颜色以呈现平滑的边缘效果。在帧缓冲区中增加了一个称为…

活字格V9 嵌入的html与活字格页面数据交互

不想看分析请直接跳到解决方案 项目场景&#xff1a; 活字格V9 嵌入的html与活字格页面的数据交互&#xff08;传值&#xff09;&#xff0c;嵌入的html用了WebSocket来控制硬件&#xff0c;获取的数据无法回传到活字格页面上&#xff0c;且嵌入的html无法使用活字格内置的js及…

《统计学简易速速上手小册》第9章:统计学在现代科技中的应用(2024 最新版)

文章目录 9.1 统计学与大数据9.1.1 基础知识9.1.2 主要案例&#xff1a;社交媒体情感分析9.1.3 拓展案例 1&#xff1a;电商销售预测9.1.4 拓展案例 2&#xff1a;实时交通流量分析 9.2 统计学在机器学习和人工智能中的应用9.2.1 基础知识9.2.2 主要案例&#xff1a;预测客户流…

设计模式-职责链模式Chain of Responsibility

职责链模式 一、原理和实现二、实现方式1) 使用链表实现2) 使用数组实现3) 扩展 作用&#xff1a;复用和扩展&#xff0c;在实际的项目开发中比较常用。在框架开发中&#xff0c;我们也可以利用它们来提供框架的扩展点&#xff0c;能够让框架的使用者在不修改框架源码的情况下&…

时间序列预测——Encoder-Decoder CNN模型

时间序列预测——Encoder-Decoder CNN模型 时间序列预测是利用历史数据来预测未来时间点的值或趋势的过程。在深度学习领域&#xff0c;各种模型被应用于时间序列预测&#xff0c;其中Encoder-Decoder CNN模型是一种使用卷积神经网络&#xff08;CNN&#xff09;的端到端序列预…

python 基础知识点(蓝桥杯python科目个人复习计划38)

今日复习内容&#xff1a;DFS的剪枝 我理解的剪枝&#xff0c;和《运筹学》里面“分支定界法”的剪枝操作一样&#xff0c;不停按照题目所给条件分割&#xff0c;当所得目标函数的值已偏离最优解时&#xff0c;就将其减去。 例题1&#xff1a;数字王国之军训排队 题目描述&a…

sheng的学习笔记-部署-目录

标题传送门 sheng的学习笔记-docker部署&#xff0c;原理图&#xff0c;命令&#xff0c;用idea设置docker sheng的学习笔记-docker部署&#xff0c;原理图&#xff0c;命令&#xff0c;用idea设置docker sheng的学习笔记-docker部署springboot sheng的学习笔记-docker部署spri…

2023年度总结 EXI-小洲

2023年度总结 EXI-小洲 文章目录 2023年度总结 EXI-小洲前言一、2023的记录1.1 工作1.2 副业1.2.1 投资1.2.2 接活 1.3 减肥1.4 校园 二、核对2022的flag三、反思四、展望2024 前言 一、2023的记录 1.1 工作 关于目前的工作&#xff0c;我用两个词语来介绍&#xff1a;运气、…

【算法训练营】数字盒子,重编码,成绩排序(python实现)

数字盒子 问题描述 你有一个盒子&#xff0c;你可以往里面放数&#xff0c;也可以从里面取出数。 初始时&#xff0c;盒子是空的&#xff0c;你会依次做 Q 个操作&#xff0c;操作分为两类&#xff1a; 插入操作&#xff1a;询问盒子中是否存在数 x&#xff0c;如果不存在则把数…

three.js各向异性shader实现记录

文章目录 WebGLMaterialsShaderLiblights_physical_fragment.glsllights_fragment_maps.glsllights_physical_pars_fragment.glsllights_fragment_begin.glsl WebGLMaterials if ( material.anisotropy > 0 ) {uniforms.anisotropyVector.value.set( material.anisotropy *…

【算法系列】隐马尔可夫链预测问题-从维特比到SLAM

前言 视频讲解在我女朋友的B站『隐马尔可夫链预测问题-从维特比到SLAM』 在上一篇文章《终于有人把隐马尔可夫链的前向后向算法讲懂了&#xff01;》中&#xff0c;我们讲解了隐马尔科夫链中三个基本问题中的概率计算问题的前向后向求解方法&#xff1a; 概率计算问题&#x…

LeetCode 399:除法求值(图的bfs遍历)

题目 给你一个变量对数组 equations 和一个实数值数组 values 作为已知条件&#xff0c;其中 equations[i] [Ai, Bi] 和 values[i] 共同表示等式 Ai / Bi values[i] 。每个 Ai 或 Bi 是一个表示单个变量的字符串。 另有一些以数组 queries 表示的问题&#xff0c;其中 quer…