【Vue】mutations

news2024/11/26 19:48:44

文章目录

  • 一、定义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.coloradmin.cn/o/1803226.html

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

相关文章

小阿轩yx-iptables 防火墙

小阿轩yx-iptables 防火墙 Linux 防火墙基础 体系主要工作在 网络层针对TCP/IP 数据包实施过滤和限制 属于典型的包过滤防火墙(或者称为网络层防火墙) 体系基于内核编码实现 好处 具有非常稳定的性能高效率 防火墙两个表示 netfilteriptables …

IPD推行成功的核心要素(七)如何利用DSTE拉通产品战略与策略?

如果说许多企业以往的管理变革重在重塑创新价值流、营销价值流、供应链价值流、人力资源价值链等,那么,DSTE管理变革重塑的就是企业的“领导价值流”。从而使企业,在未来白热化的竞争中处于领导地位,在无序中给企业一个方向&#…

用幻灯片讲解内存分配器Allocator

用幻灯片讲解内存分配器Allocators Allocators 分配器 提供内存分配策略的通用接口委托给 C 运行时:new / delete块内存池不同大小的块内存池 为什么用分配器? 将容器逻辑与内存分配策略解耦速度:内存分配速度慢确保有足够的内存可用确保所需的内…

Large-Scale LiDAR Consistent Mapping usingHierarchical LiDAR Bundle Adjustment

1. 代码地址 GitHub - hku-mars/HBA: [RAL 2023] A globally consistent LiDAR map optimization module 2. 摘要 重建精确一致的大规模激光雷达点云地图对于机器人应用至关重要。现有的基于位姿图优化的解决方案,尽管它在时间方面是有效的,但不能直接…

GiantPandaCV | 提升分类模型acc(一):BatchSizeLARS

本文来源公众号“GiantPandaCV”,仅用于学术分享,侵权删,干货满满。 原文链接:提升分类模型acc(一):BatchSize&LARS 在使用大的bs训练情况下,会对精度有一定程度的损失,本文探讨了训练的b…

SuntoryProgrammingContest2024(AtCoder Beginner Contest 357)(A~F)(最爱线段树的一集)

A - Sanitize Hands 题意: 模拟 // Problem: A - Sanitize Hands // Contest: AtCoder - SuntoryProgrammingContest2024(AtCoder Beginner Contest 357) // URL: https://atcoder.jp/contests/abc357/tasks/abc357_a // Memory Limit: 1024…

【python报错】TypeError: ‘dict_values‘ Object IsNot Subscriptable

【Python报错】TypeError: ‘dict_values’ object is not subscriptable 在Python中,字典(dict)提供了几种不同的视图对象,包括dict_keys、dict_values和dict_items。这些视图对象允许你以只读方式遍历字典的键、值或键值对。如果…

30-unittest生成测试报告(HTMLTestRunner插件)

批量执行完测试用例后,为了更好的展示测试报告,最好是生成HTML格式的。本文使用第三方HTMLTestRunner插件生成测试报告。 一、导入HTMLTestRunner模块 这个模块下载不能通过pip安装,只能下载后手动导入,下载地址是:ht…

Elasticsearch之写入原理以及调优

1、ES 的写入过程 1.1 ES支持四种对文档的数据写操作 create:如果在PUT数据的时候当前数据已经存在,则数据会被覆盖,如果在PUT的时候加上操作类型create,此时如果数据已存在则会返回失败,因为已经强制指定了操作类型…

vue ts 导入 @/assets/ 红色显示的问题解决

vue ts 导入 /assets/ 红色显示的问题解决 一、问题描述 在使用的时候这样导入会出现如上的错误。 在使用的时候,导入的类型也没有对应的代码提示,说明导入有问题。 二、解决 在 tsconfig.json 中添加如下内容: {"compilerOptions&…

【机器学习】因TensorFlow所适配的numpy版本不适配,用anaconda降低numpy的版本

目录 0 TensorFlow最高支持的numpy版本 1 激活你的环境(如果你正在使用特定的环境) 2 查找可用的NumPy版本 3 安装特定版本的NumPy 4. 验证安装 5.(可选)如果你更改了base环境 0 TensorFlow最高支持的numpy版本 要使用 …

pytorch 笔记:pytorch 优化内容(更新中)

1 Tensor创建类 1.1 直接创建Tensor,而不是从Python或Numpy中转换 不要使用原生Python或NumPy创建数据,然后将其转换为torch.Tensor直接用torch.Tensor创建或者直接:torch.empty(), torch.zeros(), torch.full(), torch.ones(), torch.…

关于python中的关键字参数

在python语言中存在两种传参方式: 第一种是按照先后顺序来传参,这种传参风格,称为“位置参数”这是各个编程语言中最普遍的方式。 关键字传参~按照形参的名字来进行传参! 如上图所示,在函数中使用关键字传参的最大作…

MySQL-备份(三)

备份作用:保证数据的安全和完整。 一 备份类别 类别物理备份 xtrabackup逻辑备份mysqldump对象数据库物理文件数据库对象(如用户、表、存储过程等)可移植性差,不能恢复到不同版本mysql对象级备份,可移植性强占用空间占…

为什么说组合优于继承?

在编程中,继承和组合是用于在面向对象语言中设计和构建类和对象的两种基本技术。 继承,它允许一个类(称为派生类或子类)从另一个类(称为基类或超类)继承属性和行为。换句话说,子类“是”超类的…

独立游戏之路 -- 获取OAID提升广告收益

Unity 之 获取手机:OAID、IMEI、ClientId、GUID 前言一、Oaid 介绍1.1 Oaid 说明1.2 移动安全联盟(MSA) 二、站在巨人的肩膀上2.1 本文实现参考2.2 本文实现效果2.3 本文相关插件 三、Unity 中获取Oaid3.1 查看实现源码3.2 工程配置3.3 代码实现3.4 场景搭建 四、总…

编译和运行qemu-uboot-arm64单板的Armbian系统

这篇文章ARM虚拟机安装OMV-CSDN博客遗留一个启动qemu-uboot-arm64单板Armbian镜像的问题,使用官方下载的镜像,会报错: fatal: no kernel available .... Failed to load /vmlinuz ...... qemu-system-aarch64 -smp 8 -m 8G -machine virt …

搭建多平台比价系统需要了解的电商API接口?

搭建一个多平台比价系统涉及多个步骤,以下是一个大致的指南: 1. 确定需求和目标 平台选择:确定你想要比较价格的平台,例如电商网站、在线旅行社等。数据类型:明确你需要收集哪些数据,如产品价格、产品名称…

苹果手机微信如何直接打印文件

在快节奏的工作和生活中,打印文件的需求无处不在。但你是否曾经遇到过这样的困扰:打印店价格高昂,让你望而却步?今天,我要给大家介绍一款神奇的微信小程序——琢贝云打印,让你的苹果手机微信直接变身移动打…

二叉树的实现(初阶数据结构)

1.二叉树的概念及结构 1.1 概念 一棵二叉树是结点的一个有限集合,该集合: 1.或者为空 2.由一个根结点加上两棵别称为左子树和右子树的二叉树组成 从上图可以看出: 1.二叉树不存在度大于2的结点 2.二叉树的子树有左右之分,次序不能…