【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,一经查实,立即删除!

相关文章

自然语言处理(NLP)—— rasa的测试

1. 测试 Rasa NLU 模型 运行 rasa test nlu 命令会测试你的 Rasa NLU 模型。这个命令主要做以下几件事情: 1.1 意图识别测试 检查模型在识别用户意图方面的性能。这包括每个意图的准确率、召回率和 F1 得分。 1.2 实体提取测试 检查模型在识别和提取预定义实体方面…

为什么先遍历背包再遍历物品,求的是排列数;先遍历物品再遍历背包,求的是组合数?

完全背包问题简介 在完全背包问题中,每个物品可以被选择任意次。我们通常使用动态规划来求解这个问题,定义 dp[j] 为填满容量为 j 的背包的方法数。 先遍历背包再遍历物品(排列数) 先遍历背包再遍历物品的逻辑是:对…

Progressive Feature Fusion Framework Based on Graph Convolutional Network

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

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

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

SCSS中的结构化伪类选择器详解与示例

SCSS,作为Sass的一种语法版本,是一种强大的CSS预处理器,它引入了许多便利的功能来增强CSS的编写能力。其中,:nth-child, :only-child, :first-child, :last-child, 和 :nth-last-child 是CSS选择器中的结构化伪类,它们…

Sass 使用指南:让 CSS 编程更高效、更强大

Sass(Syntactically Awesome Style Sheets)是一种 CSS 预处理器,通过它,开发者可以使用变量、嵌套、混合和函数等更高级的功能来编写更简洁、更易于维护的样式代码。Sass 可以被编译成纯 CSS,使得你的项目能够在所有浏…

多个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…

力扣23. 合并 K 个升序链表

给你一个链表数组,每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中,返回合并后的链表。 示例 1: 输入:lists [[1,4,5],[1,3,4],[2,6]] 输出:[1,1,2,3,4,4,5,6] 解释:链表数组如下&#…

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

导语 大家好,我是社长,老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…