Vue中vuex的使用(四)

2023-11-18

四个map方法的使用

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

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

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

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

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

3. mapActions方法: 用于帮助我们生成与actions对话的方法,即$store.dispatch(XXX,数据)

methods:{
	...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

	...mapActions({'jiaOdd','jiaWait'})
}

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

methods:{
	...mapMutations({increment:'JIA'})
	...mapMutations(['JIA'])
}

备注: mapActions和mapMutations使用时.如果需要传递数据时,要在模板绑定事件中传递参数,否则参数是默认的事件对象(event)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue中vuex的使用(四) 的相关文章

  • require('babel/register') 不起作用

    我在客户端上有一个用 ES6 编写的同构应用程序Babel 转译器 http babeljs io 我希望我的 Express 服务器具有与客户端代码相同的 ES6 语法 很遗憾require babel register 不起作用 服务器
  • Kendo UI 网格过滤器日期格式

    在我的剑道网格中 我想更改过滤器中的日期格式 例如 2015年1月30日至2015年1月30日 我已经更改了开始日期的日期格式 field StartDate title Start Date width 30 format 0 MMM d
  • 使用 Gmail 上下文小工具访问附件

    我想将电子邮件及其附件从 Gmail Google Apps 保存到另一个数据库以实现类似 CRM 的功能 然而 根据docs http code google com apis gmail gadgets contextual 提取器无法
  • 在 Node.js 中包含另一个文件中的 JavaScript 类定义

    我正在为 Node js 编写一个简单的服务器 并且使用我自己的类 名为User看起来像 function User socket this socket socket this nickname null just the typical
  • 如何精确缩放已翻译的d3地图

    我有一张已翻译的地图 以使其正确适合画布 我正在尝试实现一种缩放它的方法 它确实有效 但是当您放大时它会远离中心 而不是以鼠标甚至画布为中心 这是我的代码 function map data total views var xy d3 ge
  • ES6 类文字中的 IIFE

    在 ES5 中我们都可以这样做 myClass prototype myMethod function return function 我可以对 ES6 类文字执行同样的操作吗 不 至少现在还没有 ES6 类仅支持声明方法 因此任何不直接为
  • 有没有办法将 Google 文档分割成多个 PDF?

    我想在 Google Scripts VBA 代码中复制我为 Word 文档编写的代码 基本上 它通过搜索我插入文档中的标签 将文档 切片 为多个 PDF 文件 目的是允许合唱团使用 forScore 管理乐谱的应用程序 在切片点插入先前注
  • 我可以用一个简单的函数制作一个迭代器吗? (没有生成器或 Symbol.iterator)

    我一直在尝试使用普通函数创建一个迭代器 而不使用生成器或使用Symbol iterator用于学术目的的协议 为此 我创建了一个函数 它返回一个带有next参数 但尝试将其作为iterable的论证for of循环会产生不需要的结果 这是到
  • 光标:IE 8 和 9 中的自动行为

    我想要的是为整个正文标记指定cursor pointer 这样页面的背景是可点击的 但我也希望页面的其余部分像以前一样工作 所以我尝试为div设置cursor auto 其中包含这一页 在 FF Chrome 和 safari 中 它工作得
  • 在Javascript中将RGB数组转换为RGBA数组的快速方法

    我正在使用的模拟器在内部存储 RGB 值的一维帧缓冲区 但是 HTML5 画布在调用 putImageData 时使用 RGBA 值 为了显示帧缓冲区 我当前循环遍历 RGB 数组并以某种方式创建一个新的 RGBA 数组与此类似 https
  • 使用淘汰赛动态显示/隐藏元素

    我有一个表 有四列 即代码 名称 数量和价格 其中 我想动态更改数量列的内容 元素 通常 它应该显示其中显示数量的元素 当用户单击元素时 我想显示该元素 以便用户可以编辑数量 我正在尝试按照 示例2 来实现淘汰赛文档链接 http knoc
  • 带有桌子的嵌套表

    我在应用了表排序器的表中嵌套了表 它在嵌套表中添加了排序标题 但是它们没有对行进行排序 并且抛出了JavaScript错误 我想拥有 嵌套表不可排序 巢表上的排序实际上可以工作 但不是现状 您的第一个选择要容易得多 使嵌套表不可排序 像这样
  • 如果突出显示一个单词并且用户单击连接单词,则同时突出显示两个单词

    我最近发布了一个question https stackoverflow com questions 34963610 how can i highlight a word term quicker and smarter寻求一种更智能地突
  • Jquery Ajax 调用返回 403 状态

    我有一个 jquery Ajax 调用来实现会话的 keepalive 这个 keepAlive 方法将每 20 分钟调用一次 function keepAlive ajax type POST url KeepAliveDummy asp
  • javascript从字符串创建不区分大小写的正则表达式

    我试图通过以不区分大小写的方式将输入与正则表达式匹配来进行验证 正则表达式作为对象上的字符串从服务中下来 我可能会得到类似的东西 regex ane 我可以执行以下操作 var rx new RegExp object regex The
  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为
  • 使用 jquery-chosen 插件更新 vuejs 模型值

    尝试使用jquery 选择 http harvesthq github io chosen 使用 vue 问题是这个插件隐藏了我应用的实际选择v model 所以当我选择一个值时 vue 不会将其识别为选择更改事件 并且模型值不会更新 当我
  • 使用 javascript 从亚马逊 URL 中抓取 ASIN

    假设我有一个像这样的亚马逊产品 URL http www amazon com Kindle Wireless Reading Display Generation dp B0015T963C ref amb link 86123711 2
  • 为什么 phantomjs 不能在 MacOS Sierra 中工作?

    我们正在使用phantomjs 1 9 1 macosx phantomjs 2 0 0 macosx哪一个工作得很好OS X 埃尔卡皮坦更新后macOS 塞拉利昂它会引发以下错误 phantomjs 1 9 1 macosx phanto
  • 用于替换前 5 个数字的正则表达式,无论它们之间有什么?

    我正在努力实现以下匹配 Input 123 45 6789 123456789 1234 正则表达式尝试输出 d 5 123 45 6789 123456789 1234 d 2 3 123 45 6789 123456789 1234 d

随机推荐

  • Web启动项目走Https协议(Webpack版,Umi版和Host代理版)

    需求 Web项目的启动 一般是默认的http协议 在某些业务需求时 需要走https来调试 Webpack版本 只需在webpack的devServer中配置就可以了 devServer host 0 0 0 0 port 8080 htt
  • html代码制作的个人简历源代码

  • python requests.get post

    get 方式 首先导入requests库 import requests 定义url url https baidu com 定义请求头 注意的是headers在真实环境中是有很多数据的 我们通过python传输这个数据就要以字典的方式来定
  • windows10系统提示不允许使用你正在尝试的登录方式,请联系网络管理员了解详细信息

    故障截图如图所示 排查方法 1 检查AD域用户账号登录到是否受限 2 在运行框中输入gpedit msc查看组策略 计算机配置 windows设置 本地配置 用户权限分配 拒绝本地登录 guest 参考是否与正常登录的用户电脑设置一致 允许
  • 使用ESP8266接入“天猫精灵”控制七彩灯(WS2812)的颜色/亮度-开源

    目录 演示视频 1 准备工作 1 1 原理 1 2 使用的硬件以及硬件连接图 1 3 开发环境准备 Arduino开发环境 安装ESP8266的扩展 安装blinker Arduino库 安装blinker APP 下载ws2812的驱动库
  • 树莓派_超声波传感器_三色LED

    import RPi GPIO as GPIO import time TRIG 26 ECHO 19 GREEN 6 YELLOW 5 RED 13 GPIO setmode GPIO BCM GPIO setwarnings False
  • 仿射系统和非仿射系统的数学定义

    一 非仿射系统 非仿射系统是指系统的输入是以非线性的形式出现的 例如 u 2 sin u 等 12 非仿射系统可以用下面的一般形式表示 x t f x t g x t h u t 其中 x t 是状态变量 u t 是控制输入 f x 和 g
  • Codeforces-1260-E. Tournament贪心

    题目描述 You are organizing a boxing tournament where n boxers will participate n is a power of 2 and your friend is one of
  • 利用celebA数据集训练MTCNN网络

    利用celebA数据集训练MTCNN网络 celebA数据集简介 训练数据的处理 网络和训练 侦测部分 结果展示 有问题可以联系我的邮箱 2487429219 qq com 关于MTCNN网络可以看我上一篇博客 链接 人脸检测算法 mtcn
  • 请用C + +语言写一个生成随机数程序

    include
  • windows系统更改远程桌面端口

    开启远程桌面 我的电脑属性 远程设置 步骤一 在服务器运行窗口中输入 regedit 打开注册表编辑器 步骤二 在注册表HKEY LOCAL MACHINE SYSTEM CurrentControlSet Control Terminal
  • 注解-Annotation Types学习

    前言 注解是JDK5 之后推出的特性 可修饰包 类 方法 变量等 通过在编译 加载和运行时读取其信息 可执行相应的处理 基本原理 java注解类型实质上是一个标记 如 Autowired private TestBean testBean
  • win10家庭中文版开启Hyper-V功能

    问题描述 由于win10家庭中文版是被阉割过的 有些功能就被禁用了 启用和禁用程序中就没有了Hyper V功能 如果想要更多的功能可以将系统升级成为专业版和企业版即可解决 但如果想直接在家庭中文版下创建也是可行 这里有一位大神给出了自己的方
  • LeetCode题解--160. 相交链表

    题目 编写一个程序 找到两个单链表相交的起始节点 例如 下面的两个链表 A a1 a2 c1 c2 c3 B b1 b2 b3 在节点 c1 开始相交 注意 如果两个链表没有交点 返回 null 在返回结果后 两个链表仍须保持原有的结构 可
  • html5中拖放,HTML5中的拖放

    关于HTML5中的拖放 拖放 Drag 和 Drop 是一种常见的特性 即抓取对象以后拖到另一个位置 在 HTML5 中 拖放是标准的组成部分 在HTML5中用户可以使用鼠标选择一个可拖动元素 将元素拖动到一个可放置元素 并通过释放鼠标按钮
  • OpenHarmony dump渲染和合成图层SurfaceBuffer指南

    OpenHarmony dump渲染和合成图层SurfaceBuffer指南 引言 博客停更很久了 提起笔来渐感生疏啊 看来 还是得抽出时间来更新更新啊 好了 感慨也发完了 是时候切入正题了 本篇博客主要以本人在实际项目的开发中 为了定位O
  • 韩信点兵的算法

    秦朝末年 楚汉相争 韩信率兵打仗 某次 他急需点兵迎战 就命士兵布阵三次 命3人一排 多出2名 命5人一排 多出3名 命7人一排 多出2名 后 直言有1073名勇士可击垮敌兵 其神机妙算鼓舞士气 旌旗摇动 大败楚军 首先这个故事的真实性很低
  • Linux下用户的创建与删除

    我们在Linux下创建用户主要有两种方式 adduser和useradd 它们的区别以及主要用法如下 adduser adduser的用法很简单 只需adduser username即可 如下 sudo adduser alvin 这个命令
  • python深入笔记--装饰函数

    装饰函数的参数是被装饰的函数对象 返回原函数对象 装饰的实质语句 hanshu zhuangshi hanshu 第一步 最简单的函数 第二步 对函数进行装饰 hanshu zhuangshi hanshu 定义zhuangshi函数功能
  • Vue中vuex的使用(四)

    四个map方法的使用 1 mapState方法 用于帮助我们映射state中的数据为计算属性 computed 借助mapState生成计算属性 sum school subject 从state中读取数据 对象写法 mapState su