Vuex里面四个map方法(mapState、mapGetters、mapActions、mapMutation)

news2024/11/13 11:06:08

本章节主要讲述Vuex里面的四个优化代码的map方法,mapState、mapGetters、mapActions、mapMutation

vuex

一、store文件夹下面index.js主要内容,包含state(用于存储数据)、getters(计算属性)、mutatiions(加工数据)、actions(相应组件动作、写逻辑)

在这里插入图片描述

二、四个map方法,使用Vuex会频繁出现this.$store.commit、this.$store.dispatch、this.$store.state、this.$store.getters,为了避免出现重复代码,导致代码冗余,使用map的方法来简化代码。

先从vuex中导入要使用的map方法

import {mapState,mapActions,mapMutations、mapGetters} from 'vuex';

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

computed: {
    //借助mapState生成计算属性:sum、school、subject(对象写法)
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性:sum、school、subject(数组写法)
    ...mapState(['sum','school','subject']),
},

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

computed: {
    //借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性:bigSum(数组写法)
    ...mapGetters(['bigSum'])
},

3、mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数,如果需要传递参数需要在模板中传递号参数

methods:{
    //靠mapActions生成:incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成:incrementOdd、incrementWait(数组形式)
    ...mapActions(['jiaOdd','jiaWait'])
}

4、mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数,如果需要传递参数需要在模板中传递号参数

methods:{
    //靠mapActions生成:increment、decrement(对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成:JIA、JIAN(对象形式)
    ...mapMutations(['JIA','JIAN']),
}

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

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

相关文章

多个盒子排列规则(视觉格式化模型) 多个盒子的排列 页面布局

目录常规流常规流布局块盒的排列规则常规流 盒模型:规定单个盒子的规则 视觉格式化模型(布局规则):页面中的多个盒子排列规则 视觉格式化模型,大体上将页面中盒子的排列分为三种方式: 常规流浮动定位 …

react源码:目录结构、调试源码

我的技术栈是React,最近在整理react的源码,react版本是18.1.0,之前版本,没有看过,就此略过。 源码目录 从github将源码下载后,先看看源码目录结构,如下图所示: fixtures:代码贡献者提供的测试react package:react源码的主要部分,包含了Schedule、reconcile等等 s…

RadSystems Studio 8.1.8 Crack

RadSystems Studio 是一个用于快速开发和交付自定义应用程序的环境,快速应用开发环境,更快生成完整应用。RadSystems为生成现代应用程序和 API 提供了无数的设计选项和组件。很少或没有编码。无需专门的编程知识。可通过减少冗余编码时间来促进应用程序开…

Centos7 安装SkyWalking

Centos7 安装SkyWalkingCentos7 安装SkyWalking1 基础介绍1.1 概念1.2 核心三部分1.3 架构图2 快速安装2.1 前提条件2.2 拉取镜像2.3 启动SkyWalking2.4 访问SkyWalking UI界面Centos7 安装SkyWalking 1 基础介绍 1.1 概念 SkyWalking是一个国产的开源框架,2015年…

计算机组成原理3个实验-logisim实现“七段数码管”、“有限状态机控制的8*8位乘法器”、“单周期MIPS CPU设计”。

目录 标题1.首先是七段数码管 标题二:有限状态机控制的8*8位乘法器 标题三:单周期MIPS CPU设计 标题1.首先是七段数码管 1看一下实验要求: 2.接下来就是详细设计: 1. 组合逻辑设计 由于7段数码管由7个发光的数码管构成&#x…

信息论复习—率失真理论

目录 失真的概念: 信息率与失真的关系: 信息率失真理论: 失真函数矩阵: 平均失真度定义为: 平均失真度与信道转移概率的关系: 率失真函数: 率失真函数的物理意义: 率失真函数…

05 |「链表」必刷题

前言 前言:刷链表面试高频题。 文章目录前言一. 基础回顾二. 高频考题1、例题例题1:LeetCode 206 反转链表1)题目链接2) 算法思路3)源码剖析4)时间复杂度例题2:LeetCode 92 反转链表II1&#xf…

C++编译之(3)-camke/CMakeLists.txt的编译使用教程

引言 上一节介绍了前面我们介绍了make/Makefile来对c项目进行编译,我们继续以该项目为例讲解; C编译之(1)-g单/多文件/库的编译 C编译之(2)-make及makefile编译过程 我们先看看上一节的实战的目录结构如下: - mutilFilesDemo- include // 头…

Docker入门与应用

Docker入门与应用1.初识Docker1.1.什么是Docker1.1.1.应用部署的环境问题1.1.2.Docker解决依赖兼容问题1.1.3.Docker解决操作系统环境差异1.1.4.小结1.2.Docker和虚拟机的区别1.3.Docker架构1.3.1.镜像和容器1.3.2.DockerHub1.3.3.Docker架构1.3.4.小结1.4.安装Docker2.Docker的…

“华为杯”研究生数学建模竞赛2005年-【华为杯】D题:仓库容量有限条件下的随机存贮管理(附获奖论文)

赛题描述 工厂生产需定期地定购各种原料,商家销售要成批地购进各种商品。无论是原料或商品,都有一个怎样存贮的问题。存得少了无法满足需求,影响利润;存得太多,存贮费用就高。因此说存贮管理是降低成本、提高经济效益的有效途径和方法。 问题2 以下是来自某个大型超市的…

全链路追踪 jaeger

Jaeger 概述 Jaeger 是 Uber 开发并开源的一款分布式追踪系统,兼容 OpenTracing API,适用于以下下场景: 分布式跟踪信息传递分布式事务监控问题分析服务依赖性分析性能优化 特性 高扩展性 Jaeger后端的设计没有单点故障,可以…

大数据 | 《Riffle:Optimized Shuffle Service for Large-Scale》论文阅读

1. 简介 1.1. 近期工作 研究工作鼓励运行大量小任务 小任务能提高并行性,减少端到端耗时工程经验反对运行过多的任务 过多的task在shuffle阶段会引入大量IO开销,根本原因在于map和reduce阶段之间的shuffle IO请求数量随着任务数量的增长呈现指数级的增…

emoji 符号大全,给各位程序员增加一些奇怪的知识点

这篇博客非常有意思,我将为大家整理和罗列一些好用的 emoji 表情站点。 文章目录EmojiXDcarpedm20emoji-cheat-sheetemojiterrafsymbols符号大全unicode.orgemojiallemojiguideemojipediaemoji696 编辑器emoji.inkEmoji Artemojifinderemoji 可以在许多社交媒体平台…

Redis 持久化-AOF

Redis 持久化-AOF 1.官方资料 在线文档 : https://redis.io/topics/persistence 2.AOF 是什么? 1、AOF(Append Only File) 2、以日志的形式来记录每个写操作(增量保存),将 Redis 执行过的所有写指令记录下来(比 如 set/del 操作会记录, 读操作 get 不记录) 3、…

【大数据趋势】1月24日 美元关键位置上,应该不会一次破,纳指有概率反弹,人民币结汇行情结束在即。

确定市场形态 - 美元指数 关键位置大概率不会一次就破,有较强反弹 作为长期的关键位置101-103这个区域,没有可能一次性涨破,或者一次性跌破,所以大概率有一次反弹出现。作为趋势线(红色)来看&#xff0c…

十大经典排序算法(动态演示+代码)-冒泡算法

时间、空间复杂度比较 排序算法平均时间复杂度最差时间复杂度空间复杂度数据对象稳定性冒泡排序O(n2)O(n2)O(1)稳定选择排序O(n2)O(n2)O(1)数组不稳定、链表稳定插入排序O(n2)O(n2)O(1)稳定快速排序O(n*log2n)O(n2)O(log2n)不稳定堆排序O(n*log2n)O(n*log2n)O(1)不稳定归并排序…

万能四码(0126版本)之分析

万能四码(0126版本)之分析一、万能四码的重新排列原版是这样的:0126,0134,0159,0178,0239,0247,0258,0357,0368,0456,0489…

【进阶C语言】程序环境与预处理

文章目录一.程序环境1.翻译环境编译器1.预处理2.编译3.汇编链接器2.运行环境总图解二.预处理1.预定义符号2.define1.define的定义2.替换规则3.定义的建议和使用的缺点1.加括号2.避免使用带有副作用的符号3.命名约定4.#和##1.#2.##5.宏和函数的对比6.undef3.条件编译1.常量表达式…

趣味三角——第3章——6个三角函数的成熟过程

目录 3.1 6个三角函数的演化进程简述 3.2 Johann Muller(别名Regiomontanus)的贡献 第3章 6个三角函数的成熟过程 It is quite difficult to describe with certainty the beginning of trigonometry . . . . In general, one may say that the emphasis was placed first …

ThinkPHP5 Request类method任意方法调用RCE

ThinkPHP v5.0.x 影响版本&#xff1a;5.0.0 < version < 5.0.23 漏洞点&#xff1a;\think\Request::method 修复&#xff1a;版本更新 top-think/framework4a4b5e6 改进Request类 环境 thinkphp5.0.23核心版&#xff08;需开启debug&#xff09;thinkphp5.0.22完…