【Vue】获取模块内的mutations方法

目标:

掌握模块中 mutation 的调用语法

注意:

默认模块中的 mutation 和 actions 会被挂载到全局,需要开启命名空间,才会挂载到子模块。

调用方式:

  1. 直接通过 store 调用 $store.commit('模块名/mutations名 ', 额外参数)
  2. 通过 mapMutations 映射
    1. 默认根级别的映射 mapMutations([ mutations名’ ])
    2. 子模块的映射 mapMutations(‘模块名’, [‘mutations名’]) - 需要开启命名空间

代码示例

modules/user.js

const mutations = {setUser (state, newUserInfo) {state.userInfo = newUserInfo}
}

modules/setting.js

const mutations = {setTheme (state, newTheme) {state.theme = newTheme}
}

Son1.vue

<button @click="updateUser">更新个人信息</button> 
<button @click="updateTheme">更新主题色</button><script>
export default {methods: {updateUser () {// $store.commit('模块名/mutation名', 额外传参)this.$store.commit('user/setUser', {name: 'xiaowang',age: 25})}, updateTheme () {this.$store.commit('setting/setTheme', 'pink')}}
}
</script>

Son2.vue

<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button><script>
methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme', '...']),
...mapMutations('user', ['setUser', '...']),
}
</script>

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

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

相关文章

k8s面试题大全,保姆级的攻略哦(三)

目录 1、简述ETCD及其特点? 2、简述ETCD适应的场景? 3、简述什么是Kubernetes? 4、简述Kubernetes和Docker的关系? 5、简述Kubernetes中什么是Minikube、Kubectl、Kubelet? 6、简述Kubernetes常见的部署方式? 7、简述Kubernetes如何实现集群管理? 8、简述Kubern…

卷积 - 感受野(Receptive Field)

卷积 - 感受野&#xff08;Receptive Field&#xff09; flyfish 感受野&#xff08;Receptive Field&#xff09;是指卷积神经网络中某一层的一个特定神经元能够“看到”并响应的输入图像区域。简单来说&#xff0c;它是指卷积核在输入图像上滑动过程中每次覆盖的区域。感受…

09-Eureka-搭建eureka服务

09-Eureka-搭建eureka服务 1.动手实践&#xff1a; 1.搭建EurekaServer 2.将user-service、order-service都注册到Eureka 3.在order-service中完成服务拉取&#xff0c;然后通过负载均衡挑选一个服务&#xff0c;实现远程调用 2.搭建EurekaServer服务步骤如下&#xff1a; 1.…

【设计模式】结构型设计模式之 组合模式

介绍 这里的组合模式&#xff0c;与之前的设计模式中的"组合关系"完全是两码事&#xff0c;这里的组合模式主要用来处理结构为树形的数据。 组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你将对象组合成树状结构来表示…

MongoDB ObjectId 详解

MongoDB ObjectId 详解 MongoDB 是一个流行的 NoSQL 数据库,它使用 ObjectId 作为文档的唯一标识符。ObjectId 是一个 12 字节的 BSON 类型,它在 MongoDB 中用于保证每个文档的唯一性。本文将详细解释 ObjectId 的结构、生成方式以及它在 MongoDB 中的应用。 ObjectId 的结…

2024年水利水电安全员考试题库及答案

一、单选题 1.在各类有机电解质之间&#xff0c;其毒性大小排序正确的是&#xff08;&#xff09;。 A.脂肪煙〉醇&#xff1e;酮&#xff1e;环煙〉芳煙 B.脂肪煙&#xff1e;醇&#xff1e;酮〉芳煙〉环煙 C.芳煙〉醇&#xff1e;酮&#xff1e;环煙〉脂肪煙 D.芳煙〉酮…

【C++】函数模板和类模版

目录 前言 模板参数 类型模板参数 非类型模板参数 模板的特化 函数模板的特化 类模板的特化 全特化 偏特化 模板的分离编译 模板总结 前言 函数模板和类模板是C模板编程中的两个核心概念&#xff0c;它们允许程序员编写泛型代码&#xff0c;这些代码可以在多种数据…

月薪70-100k,京东招ML算法工程师和运筹优化专家!

Datawhale分享 推荐&#xff1a;黄玉琳&#xff0c;京东&#xff0c;Datawhale成员 团队介绍 我们是京东零售集团供应链算法优化团队&#xff0c;通过在人工智能与运筹优化领域的持续性技术革新,为京东自营千万级商品提供算法策略支持,实现了以用户为中心的供应链管理和更高效…

常用PromQL语句

常用PromQL语句 1. 查询CPU使用率&#xff1a;2. 查询内存使用率&#xff1a;3. 查询磁盘使用率&#xff1a;4. 查询网络带宽使用率&#xff1a;5. 查询数据库连接数&#xff1a;6. 查询HTTP请求响应时间&#xff1a;7. 查询日志错误数量&#xff1a;8. 查询系统负载&#xff1…

我的创作纪念日-2024年6月10日

机缘 最开始写博客的想法很单纯&#xff0c;记录自己的学习过程在以后可以随时回顾自己需要的知识。 收获 从第一篇博客到现在最明显的变化就是自己做实验和写东西的思路越来越规范了&#xff0c;学习了解实现的东西也更加具体了。通过一篇篇博客我看到了自己在一点点积累&am…

Web前端GIS入门:从基础到实践的全方位探索

Web前端GIS入门&#xff1a;从基础到实践的全方位探索 随着信息技术的飞速发展&#xff0c;地理信息系统&#xff08;GIS&#xff09;已经深入到我们生活的方方面面。而Web前端GIS作为GIS领域的一个重要分支&#xff0c;正逐渐成为开发者和研究者的热门选择。本文将从四个方面…

攻防世界---misc---BotW-

1、下载附件是一张图片 2、查看图片属性&#xff0c;用winhex分析&#xff0c;没有发现奇怪的地方&#xff0c;用binwalk&#xff0c;接着使用foremost 3、得到两张图片&#xff0c;一张是原图&#xff0c;一张是特殊的字符 4、经过查阅资料得知&#xff0c;这是希卡文字&#…

iOS 查看runtime源码的几种方法

目录 前言 查看runtime 源码方法 1.下载 Apple 官方提供的源代码 2.通过 GitHub 访问镜像 3.使用命令行工具查看 4.示例 前言 这篇博客主要介绍了查看iOS runtime源代码的方法。 查看runtime 源码方法 查看iOS runtime源码的方法包括以下几个步骤&#xff1a; 1.下载 A…

IPv6 归属地城市级 Api 接口 - 精准定位每一个连接

随着互联网的快速发展&#xff0c;人们对于网络安全和隐私保护的要求也越来越高。在网络世界中&#xff0c;每一个连接都有其特定的地理位置&#xff0c;了解连接的归属地信息对于识别恶意行为以及网络运营具有重要意义。IPv6 归属地城市级 Api 接口就能够实现对连接的精准定位…

复数乘法IP核的使用

一、IP核解析 在这张图片中&#xff0c;我们看到的是一个“Complex Multiplier (6.0)” IP 核的配置界面。以下是各个配置参数的详细说明&#xff1a; 1.1 Multiplier Construction Use LUTs: 选择这个选项时&#xff0c;乘法器将使用查找表&#xff08;LUTs&#xff09;来实现…

使用jemalloc实现信号驱动的程序堆栈信息打印

使用jemalloc实现信号驱动的程序堆栈信息打印 本文介绍应用如何集成jemalloc&#xff0c;在接收到SIGUSR1信号10时打印程序的堆栈信息。 1. 编译jemalloc 首先&#xff0c;确保你已经编译并安装了启用prof功能的jemalloc。以下是ubuntu18.04上的编译步骤&#xff1a; git c…

Understanding Diffusion Objectives as the ELBO with Simple Data Augmentation

Understanding Diffusion Objectives as the ELBO with Simple Data Augmentation 引言 本文前作 VDM 已经推导出了扩散模型可以将优化 ELBO 作为目标函数。然而现在 FID &#xff08;也就是感知质量&#xff09;最好的模型还是用的其他目标函数&#xff08;如 DDPM 的噪声预…

【JavaScript脚本宇宙】触摸、响应式、定制化——图形和图像库的百变魅力!

身临其境的视觉盛宴&#xff1a;图形与图像库全方位解析&#xff01; 前言 在现代Web开发中&#xff0c;图形和图像库扮演着至关重要的角色&#xff0c;为开发人员提供了丰富的工具和资源来实现各种视觉效果和交互体验。本文将深入探讨几种流行的图形和图像库&#xff0c;包括…

用AI制作历史解说视频:GPT + MidJourney + PiKa + FunSound + 剪映

1. 项目介绍 最近某站看到一个看到利用AI创作视频解说&#xff0c;成品画面很酷炫。对此以初学者视角进行复现&#xff0c;创意来源&#xff1a;用AI制作历史解说视频 2. 开始创作 我们参照原作者展示的内容&#xff0c;对古代人物屈原来生成解说视频。 2.1 故事脚本分镜 【…

Mysql数据库连接异常处理: Host is not allowed to connect to this MySQL server解决方法

这个错误&#xff0c;其实就是我们安装的MySQL不允许远程登录&#xff0c;解决方法如下&#xff1a; 1. 在装有MySQL的机器上登录MySQL mysql -u root -p密码&#xff0c;执行如下命令&#xff1a; use mysql; select host from user where user root; 该结果表示是当前的…