【Vue】mutations

文章目录

  • 一、定义mutations
  • 二、组件中提交 mutations
  • 三、带参数的 mutations

一、定义mutations

mutations是vuex中的对象,这个对象可以定义在当前store的配置项中

const store = new Vuex.Store({state: {count: 0},// 定义mutations// mutations是一个对象,对象中存放修改state的方法mutations: {// 方法里参数 第一个参数是当前store的state属性// 第二个参数:payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷addCount (state, payload) {// 修改数据state.count += 1}},
})

二、组件中提交 mutations

this.$store.commit('addCount') // 写的是mutations方法的名字

三、带参数的 mutations

目标

掌握 mutations 传参语法

语法

看下面这个案例,每次点击不同的按钮,加的值都不同,每次都要定义不同的mutations处理吗?

68321700423

提交 mutation 是可以传递参数的 this.$store.commit('xxx', 参数)


提供mutation函数(带参数 - 提交载荷payload)

mutations: {...addCount (state, count) {state.count = count}
},

提交mutation

handle ( ) {this.$store.commit('addCount', 10)
}

小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

this.$store.commit('addCount', {count: 10
})

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

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

相关文章

Progressive Feature Fusion Framework Based on Graph Convolutional Network

以Resnet50作为主干网络,然后使用GCN逐层聚合多级特征,逐级聚合这种模型架构早已不新鲜,这篇文章使用GCN的方式对特征进行聚合,没有代码。这篇文章没有过多的介绍如何构造的节点特征和邻接矩阵,我觉得对于图卷积来说&a…

自动化Reddit图片收集:Python爬虫技巧

引言 Reddit,作为一个全球性的社交平台,拥有海量的用户生成内容,其中包括大量的图片资源。对于数据科学家、市场研究人员或任何需要大量图片资源的人来说,自动化地从Reddit收集图片是一个极具价值的技能。本文将详细介绍如何使用…

多个p标签一行展示,溢出隐藏

一开始,我是让div包裹多个p标签,并让div“flex”布局,且单行溢出隐藏,可是发现当父元素或当前元素有flex时,text-overflow: ellipsis;是不生效的 大多数解决办法都是,不要flex,或者给div下的每个…

【启程Golang之旅】网络编程与反射

欢迎来到Golang的世界!在当今快节奏的软件开发领域,选择一种高效、简洁的编程语言至关重要。而在这方面,Golang(又称Go)无疑是一个备受瞩目的选择。在本文中,带领您探索Golang的世界,一步步地了…

Java进阶_多态特性

生活中的多态 多态是同一个行为具有多个不同表现形式或形态的能力。多态就是同一个接口,使用不同的实例而执行不同操作,如图所示: 现实中,比如我们按下 F1 键这个动作,同一个事件发生在不同的对象上会产生不同的结果。…

达梦8 探寻达梦排序机制之一:传统排序机制(SORT_FLAG=0)

测试版本:--03134283938-20221019-172201-20018 达梦的排序机制由四个dm.ini参数控制: SORT_BUF_SIZE 100 #maximum sort buffer size in MegabytesSORT_BLK_SIZE 1 #ma…

自动化立体库集成技术--含(思维导图)

导语 大家好,我是社长,老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 随着科技的不断进步和物流行业的快速发展,自动化立体库集成技术已成为现代物流仓储的重要支撑。 它利用先进的自动化设备和智能化管理…

[leetcode hot 150]第一百三十七题,只出现一次的数字Ⅱ

题目: 给你一个整数数组 nums ,除某个元素仅出现 一次 外,其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法且使用常数级空间来解决此问题。 由于需要常数级空间和线性时间复杂度…

http协议,tomcat的作用

HTTP 概念:Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器和服务器之间数据传输的规则。 特点: 1.基于TCP协议:面向连接,安全 2. 基于请求-响应模型的:一次请求对应一次响应 3HTTP协议是无状态的协议:对于事务处理没有记忆能…

tsconfig.json和tsconfig.app.json文件解析(vue3+ts+vite)

tsconfig.json {"files": [],"references": [{"path": "./tsconfig.node.json"},{"path": "./tsconfig.app.json"}] }https://www.typescriptlang.org/tsconfig/#files files: 在这个例子中,files 数…

git-生成SSH密钥

git-生成SSH密钥 1 打开命令窗口2 操作 1 打开命令窗口 选择"Git Bash Here",打开Git命令窗口 2 操作 查看当前用户名称 git config user.name配置你的邮箱,“6xxxqq.com” 填写自己的邮箱 git config --global user.email "6xxxqq…

认识Java中的String类

前言 大家好呀,本期将要带大家认识一下Java中的String类,本期注意带大家认识一些String类常用方法,和区分StringBuffer和StringBuilder感谢大家收看 一,String对象构造方法与原理 String类为我们提供了非常多的重载的构造方法让…

计算机网络基础-VRRP原理与配置

目录 一、了解VRRP 1、VRRP的基本概述 2、VRRP的作用 二、VRRP的基本原理 1、VRRP的基本结构图 2、设备类型(Master,Backup) 3、VRRP抢占功能 3.1:抢占模式 3.2、非抢占模式 4、VRRP设备的优先级 5、VRRP工作原理 三…

React基础教程:react脚手架

1、create-react-app 全局安装create-react-app npm install -g create-react-app安装成功之后,通过命令create-react-app -V检查是否安装成功 创建一个项目 create-react-app my-app如果不想全局安装,可以直接使用npx,也可以实现相同的效…

小主机折腾记25

10.买了惠普光驱,想给880g5twr安装上,结果发现卡扣不对 880g5twr的卡扣更长一些,比光驱本身长一些,各位如果想买的注意擦亮眼睛,看看卡扣跟你的主机一致与否 后续在闲鱼上买了个卡扣,加邮费12块钱…… 1…

转让闲置商标别中了残标,与驰名商标近似被驳回!

前几天有个人说要购买一个闲置的已注册商标,普推商标知产老杨帮忙去联系了一下,发现这个商标是残标用不成,他是要买回来的做化妆品的,但是在3类化妆品里面化妆品的小类并没有通过初审下证。 大家转让闲置商标就要注意了&#xff0…

链表的中间结点

一、题目链接 https://leetcode.cn/problems/middle-of-the-linked-list/submissions/538121725、 二、思路 定义快慢指针,快指针一次走两步,慢指针一次走一步,最后慢指针的位置就是中间结点的位置 三、题解代码 //快慢指针,快…

带你学习Mybatis之逆向工程

逆向工程 可以针对单表自动生成MyBatis执行所需要的代码&#xff0c;包括&#xff1a;Mapper.java&#xff0c;Mapper.xml&#xff0c;实体类&#xff0c;这样可以减少重复代码的编写 <dependency> <groupId>org.mybatis.generator</groupId> …

【计算机视觉(9)】

基于Python的OpenCV基础入门——形态学操作 形态学操作腐蚀膨胀开运算闭运算梯度运算顶帽黑帽 形态学操作代码实现以及效果图 形态学操作 形态学操作是数字图像处理中的一种方法&#xff0c;用于改变和提取图像中的结构和形状信息。它基于图像的形状和大小特征&#xff0c;通过…

基于SpringBoot+Vue单位考勤系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…