vue的action与mutation 的区别

在 Vue.js 的状态管理库 Vuex 中,mutations 和 actions 都是用于更改状态的方法,但它们之间存在一些重要的区别。下面我将通过举例来说明这些区别:

1. 基本定义
mutations:用于直接修改状态(state)。它们是同步函数。
actions:用于提交 mutations,而不是直接修改状态。它们可以包含任意异步操作。


2. 示例

假设我们有一个简单的购物车应用,其中有一个状态 cartItems 表示购物车中的商品。

mutations 示例
javascript
mutations: {
  ADD_TO_CART(state, item) {
    // 直接修改状态
    state.cartItems.push(item);
  }
}

actions 示例
javascript
actions: {
  async addToCart({ commit }, item) {
    // 模拟异步操作,例如从服务器获取商品信息
    const itemDetails = await fetchItemDetails(item.id);
    
    // 提交 mutation 来修改状态
    commit('ADD_TO_CART', { ...item, ...itemDetails });
  }
}

3. 主要区别
同步与异步:mutations 是同步的,这意味着它们会立即修改状态。而 actions 可以包含异步操作,例如 API 调用,然后在异步操作完成后提交一个 mutation。
直接修改状态:mutations 直接修改状态。而 actions 不直接修改状态,而是通过提交 mutation 来修改状态。
类型检查:在 Vuex 的严格模式下,mutations 的类型(即它们的名称)会被检查,以确保它们没有被意外地调用。而 actions 的类型则不会被这样检查。
4. 使用场景
当你需要直接、同步地修改状态时,使用 mutations。
当你需要进行异步操作或需要封装一些复杂的逻辑(例如错误处理、日志记录等)时,使用 actions。

通过上面的例子和解释,希望你能更清晰地理解 Vuex 中 mutations 和 actions 的区别及其使用场景。

 

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

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

相关文章

【 书生·浦语大模型实战营】作业(六):Lagent AgentLego 智能体应用搭建

【 书生浦语大模型实战营】作业(六):Lagent & AgentLego 智能体应用搭建 🎉AI学习星球推荐: GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方…

35.Docker-数据卷,目录挂载

注意:在容器内修改文件是不推荐的。 1.修改不方便,比如vi命令都无法使用。 2.容器内修改,没有日志记录的。 问题:那应该如何修改容器中的文件呢? 数据卷 volume是一个虚拟目录,指向宿主机文件系统中的…

如何把学浪的视频保存到手机

你是不是还在为无法将学浪的视频保存到手机而烦恼?别担心,接下来我将为大家分享一个非常实用的方法,让你轻松实现这一目标! 下载学浪的工具我已经打包好了,有需要的自己下载一下 学浪下载工具打包链接:百…

一加12/11/10/Ace2/Ace3手机上锁回锁BL无限重启黑屏9008模式救砖

一加12/11/10/Ace2/Ace3手机官方都支持解锁BL,搞机的用户也比较多,相对于其他品牌来说,并没有做出限制,这也可能是搞机党最后的救命稻草。而厌倦了root搞机的用户,就习惯性回锁BL,希望彻底变回官方原来的样…

Python爬虫:线程,进程与协程

以往的爬虫我们都采用单线程和同步的方式,这导致我们的爬虫及其脆弱,因为一点报错都会让它停下来,而且面对比较大的数据,爬虫只能选择等待,这种阻塞会消耗很多时间,为什么我们不把等待的这些时间去干别的事…

研究论文的蓝图:精通论文大纲的编写技巧

研究论文大纲是一个补充文件,描述了按计划顺序纳入论文的所有主题,通常按段落分割。正常的研究论文大纲包括额外的细节,例如子主题和证据来源,以帮助作者保持结构。本文讨论了研究论文大纲的内容以及如何撰写。 研究论文大纲的含…

C#语言入门

一、基础知识 1. 程序语言是什么 用于人和计算机进行交流,通过程序语言让计算机能够响应我们发出的指令 2. 开发环境 IDE,集成开发环境。它就是一类用于程序开发的软件,这一类软件一般包括了代码编辑、编译器、调试器、图形用户界面等等工…

STM32独立看门狗,实现单片机自动重启

今天学习了一下独立看门狗,看门狗的主要作用就是防止程序中有死循环或是不知道的bug,而造成在while循环中没有及时喂狗,程序就会控制单片机重启复位,从而不至于影响程序一直不能正常工作。 其实看门狗的应用也不是很复杂&#xf…

1020. 【USACO题库】2.1.1 The Castle城堡

题目描述 以一个几乎超乎想像的运气,农民约翰在他的生日收到了一张爱尔兰博彩的奖券。 这一张奖券成为了唯一中奖的奖券。 农民约翰嬴得爱尔兰的乡下地方的一个传说中的城堡。 吹牛在他们威斯康辛州不算什么,农民约翰想告诉他的牛所有有关城堡的事。 他想知道城堡有多少房间…

Java中的异常处理机制详解

在Java编程中,异常处理是确保程序健壮性的关键部分。异常是在程序执行期间发生的特殊事件,它们破坏了正常的指令流。Java提供了一套完善的异常处理机制,允许开发者捕获并处理这些异常情况。 什么是异常? 在Java中,异…

光伏光热一体化技术PVT

1、PVT集热器简介 太阳能光伏光热一体化组件主要由光伏与光热两个部分组成。光伏部分采用技术成熟的太阳能光伏面板,通过控制系统为建筑提供所需电能,主要包括光伏电池、蓄电池、逆变器和控制器等构件。光热部分主要为集热器,将太阳能转换为热…

力扣例题(接雨水)

链接: . - 力扣(LeetCode) 题目描述: 思路: 判断一块地方是否可以接到雨水,只需要判断他是否有左右边界使他可以接到水 左右边界分别为此处左侧的最高点和右侧的最高点 同时此处可接雨水的高度为左右两…

Android无法开机卡在开机界面问题解决

问题描述 对Android操作系统进行一些修改后,例如: service相关 servicerc文件xml文件 lib相关 so动态库 等等,有可能导致一直卡在开机界面 问题原因 未知的原因 问题解决 有几种可以观察到现象的方案: 1. 音量上电源键 …

整理好了!2024年最常见 100 道 Java基础面试题(二十八)

上一篇地址:整理好了!2024年最常见 100 道 Java基础面试题(二十七)-CSDN博客 五十五、String 真的是不可变的吗? 在Java中,String 类的对象确实是不可变的(Immutable)。这意味着一…

基于Pytorch深度学习——GPU安装/使用

本文章来源于对李沐动手深度学习代码以及原理的理解,并且由于李沐老师的代码能力很强,以及视频中讲解代码的部分较少,所以这里将代码进行尽量逐行详细解释 并且由于pytorch的语法有些小伙伴可能并不熟悉,所以我们会采用逐行解释小…

《QT实用小工具·四十九》QT开发的轮播图

1、概述 源码放在文章末尾 该项目实现了界面轮播图的效果,包含如下特点: 左右轮播 鼠标悬浮切换,无需点击 自动定时轮播 自动裁剪和缩放不同尺寸图片 任意添加、插入、删除 单击事件,支持索引和自定义文本 界面美观,圆…

开源免费的网盘项目Cloudreve,基于Go云存储个人网盘系统源码(七牛、阿里云 OSS、腾讯云 COS、又拍云、OneDrive)

项目简介: 在现今的网盘服务中,用户经常遭遇限速和价格上涨的问题,这无疑增加了使用上的困扰。 为此,我今天要介绍一款开源且免费的网盘项目——Cloudreve。 这个项目是基于Go语言开发的云存储个人网盘系统,支持多种…

[笔试训练](十二)

目录 034:删除公共字符串 035:两个链表的第一个公共节点 036:mari和shiny 034:删除公共字符串 删除公共字符_牛客题霸_牛客网 (nowcoder.com) 题解: 用哈希记录好第二个字符串中的字符,再遍历一遍第一个字符串,只将没有记录的字符加在结果字符串上。…

[C++][数据结构]哈希1:哈希函数的介绍与线性探测的实现

前言 学完了二叉树,我们要学当前阶段数据结构的最后一个内容了:哈希!! 引入 先来介绍两个用哈希封装的两个容器:unordered_map unordered_set 与map和set的不同: map/set是双向迭代器,而另…

【已解决】VSCode 连接远程 Ubuntu :检测到 #include 错误。请更新 includePath。

文章目录 1. 环境声明2. 解决过程 1. 环境声明 即使是同一个报错,在不同的环境中,报错原因、解决方法都是不同的,本文只能解决跟我类似的问题,如果你发现你跟我遇到的问题不太一样,建议寻找其他解法。 必须要吐槽的是…