VUEX 使用学习四 : action

转载请注明出处:

  action 用于处理异步任务;action,可以操作任意的异步操作,类似于mutations,但是是替代mutations来进行异步操作的。首先mutations中必须是同步方法,如果使用了异步,虽然页面上的内容改变了,但实际上Vuex.Store没有监听到数据的更新

  如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发 Mutation的方式间接变更数据。

1. this.$store.dispatch 是触发actions的第一 种方式

//定义store.js 中定义action
  actions: {
    addAsync(context) {
      setTimeout(()=> {
        context.commit('add')
      },1000)
    }
  }


//在事件方法中通过dispatch触发action
add () {
    //  触发action
    this.$store.dispatch('addAsync')
  }

  触发异步任务携带参数

 mutations: {
   add(state,step) {
    state.count += step
   }
  },
  actions: {
    addAsync(context,step) {
      setTimeout(()=> {
        context.commit('add',step)
      },1000)
    }
  }
//触发action
add () {
    this.$store.dispatch('addAsync',5)
  }

2.触发actions的第二 种方式

  1.从vuex中按需求导入mapState函数

import {maptActions} from 'vuex'

  2. 将指定的mutations函数,映射为当前组件的methods函数

methods:{ ...maptActions(['addAsync']) }

 

本文转载于网络 如有侵权请联系删除

相关文章

  • Docker安装fiora聊天室

    Docker安装fiora聊天室官方文档https://yinxin630.github.io/fiora/zh-Hans/docs/install环境准备docker服务器安装docker请看我之前的文章或者参考https://docs.docker.com/get-docker/步骤(主要对官方文档的代码进行补充)本次补充主要可以使容器在后台跑,而官方文档的命令是在前台跑的#拉取mongo dockerpullmongo #拉取redis dockerpullredis #拉取fiora dockerpullsuisuijiang/fiora #创建虚拟网络 dockernetworkcreatefiora-network #启动mongodB dockerrun--namefioradb-d-p27017:27017--networkfiora-networkmongo #启动redis dockerrun--namefioraredis-d-p6379:6379--networkfiora-networkredis #启动fiora dockerrun--namef

  • 《kafka问答100例 -4》 如果我手动在zk中添加/brokers/topics/{TopicName}节点会怎么样?

    ????《Kafka运维管控平台》????✏️更强大的管控能力✏️????更高效的问题定位能力????????更便捷的集群运维能力????????更专业的资源治理????????更友好的运维生态????相关免费专栏????《Kafka面试100例》????????《从0开始学kafka》????打卡日更????《Kafka面试100例》???? 当前更文情况::4/100 如果我手动在zk中添加`/brokers/topics/{TopicName}`节点会怎么样?先说结论:根据上面分析过的源码画出的时序图可以指定;客户端发起创建Topic的请求,本质上是去zk里面写两个数据 topic的配置信息/config/topics/Topic名称持久节点topic的分区信息/brokers/topics/Topic名称持久节点 所以我们绕过这一步骤直接去写入数据,可以达到一样的效果;不过我们的数据需要保证准确 因为在这一步已经没有了一些基本的校验了;假如这一步我们写入的副本Brokerid不存在会怎样,从时序图中可以看到,leaderAndIsrRequest请求;就不会正确的发送的不存在的

  • SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍

    这是Jerry2021年的第11篇文章,也是汪子熙公众号总共第282篇原创文章。Jerry之前的文章SAPUI5OData谣言粉碎机:极短时间内发送两个Odatarequest,前一个会自动被cancel掉吗,介绍过SAP成都研究院CRMFiori开发团队开发过的一个LiveSearch的场景。用户创建Opportunity,维护Account字段,每输入一个字符,都会触发SAPUI5Input控件的liveChange事件。在该事件的onAccountInputFieldChanged处理函数里,根据用户输入,发送OData请求到后台进行查询。如果用户输入速度很快,则在短时间内,会有多个OData请求发送到后台,进而出现Jerry文章里描述的OData请求被cancel的情况。 最近Jerry做SAPSpartacus开发,遇到了同样的场景。因此通过本文把自己最近所学总结一下,记录下SAPUI5和Angular里如何使用函数防抖(Debounce)和函数节流(Throttle)来避免短时间内触发高频次函数调用的情况出现。为了便于讲解,Jerry做了一个只包含一个Input控件的SAP

  • dotNET Core:编码规范

    在项目开发过程中,由于时间紧、任务重,很容易导致面向功能编程。实现相同的功能,代码可以写的很优雅,也可以写的很晦涩和复杂。现在的工作,都需要进行团队协作,代码就需要有一定的规范进行指引,因为我们需要写出让人可以轻易读懂的代码,而不仅仅是机器。 规范没有绝对的标准,遵循大部分人都认可的一种方式就可以了,保持统一。比如在dotNETCore中,我们可以参考下dotNETCore的源码,最终制定一个适合团队的规范即可。下面是我理解的正确的一些规范:基本准则1、命名的规范分为两种:Pascal(大驼峰)和驼峰(小驼峰),示例如下:•Pascal:UserName •驼峰:userName2、命名要有意义,需要看到名称知其含义。少用拼音和匈牙利命名法。示例Intprice=20;√UserInfouserInfo=GetUserInfo(userId);√Intp=20;×IntintPrice=20;×3、对于类的成员变量,用this关键字,增强代码可读性。 4、对于基类的成员变量,用base关键字,增强代码可读性。名称规范好的名称可以让我们减少很多不必要的注释,可以让代码阅读者很容易就理解代

  • PyTorch多GPU并行训练方法及问题整理

    作者link-web@知乎https://zhuanlan.zhihu.com/p/86441879编辑极市平台以下都在Ubuntu上面进行的调试,使用的Ubuntu版本包括14,18LST1.单机多卡并行训练1.1.torch.nn.DataParallel我一般在使用多GPU的时候,会喜欢使用os.environ['CUDA_VISIBLE_DEVICES']来限制使用的GPU个数,例如我要使用第0和第3编号的GPU,那么只需要在程序中设置:os.environ['CUDA_VISIBLE_DEVICES']='0,3'复制但是要注意的是,这个参数的设定要保证在模型加载到gpu上之前,我一般都是在程序开始的时候就设定好这个参数,之后如何将模型加载到多GPU上面呢?如果是模型,那么需要执行下面的这几句代码:model=nn.DataParallel(model) model=model.cuda()复制如果是数据,那么直接执行下面这几句代码就可以了:inputs=inputs.cuda() labels=labels.cud

  • 视频社交洞悉(下)

    前言在视频社交洞悉(上)我们通过调研视频社交市场现状,分析和拆解了视频社交的概念。得出“视频社交”的本质一种“实时社交”的结论,进而分析了视频社交的优点和缺点。本篇我们将讨论视频社交的用户特点以及可能的机会点。微信、微博、贴吧、陌陌、探探……,过去几年是“异步社交”狂飙突进的几年。现实生活中很多人内心敏感、与人相处谨小慎,社交压力已经很大。所以异步社交的模式降低了他们的社交成本,同时掩盖了社交能力的不足,也更符合现代人碎片化的生活习惯。那么高压力的同步社交会有机会吗?这要从这部分新用户的特点说起。视频社交用户的特点先看几个典型场景:你是广西人,高中辍学来东莞4年了。当年的同学很多都大学毕业在城市写字楼里上班。你喜欢的穿白衬衫的女生去了广州读大学,朋友圈的发的照片都很好看。这几年你从橡胶厂到了塑料厂又到了玩具厂。一天工作12小时两班倒没社保没医保,加班费低得可怜,在机床从你早上站到晚上下班耳边都是轰隆隆是机器声音,除了下班后三三两两的啤酒局你也没地方说话。半夜下了班你坐在台阶上,给伊对的“红娘”和“相亲对象”开始打赏,一百接一百,你开始讲起学生时代时的故事,讲你为了那个白衬衫女生在街头单

  • 从零开始学web安全(4)

    本文作者:IMWeb刘志龙原文出处:IMWeb社区未经同意,禁止转载 忙忙忙,最近事情实在有点多,赶在月底写一下系列4。前面3个文章简单介绍了xss,后面还会继续对xss进行研究。无奈最近啥都没研究,只好先一个csrf的入门文章过渡一下。这篇是csrf入门篇,内容比较简单,知道csrf的同学可以直接关掉页面了。CSRF是什么CSRF(CrossSiteRequestForgery,跨站域请求伪造)是一种网络的攻击方式,它在2007年曾被列为互联网20大安全隐患之一。CSRF能干啥攻击者盗用了你的身份,在你不知情的情况下以你的名义发送恶意请求。CSRF能够做的事情包括:以你名义发送邮件,发消息,购买商品,虚拟货币转账,删你文章,微博等等。CSRF原理看完上面介绍,我自己是没有任何收获。。还是先看个图吧。借用cnblogs某大大一个图看看上面这个流程,经常是我们平时浏览网站经常会走的流程。简单说来,首先我们在A网站登陆了,假设A网站有csrf漏洞,然后我们不小心浏览到某个恶意网站B,然后我们就被入侵了55555。。。上面这个流程,估计大家有可能有疑惑的应该只是步骤5或者步骤6。就是说在恶意

  • 强烈推荐 | 算法/深度学习/NLP面试笔记

    阅读大概需要3分钟导读春招的气息已然来了,不知道小伙伴们准备的咋样了。今日在github上发现了个巨棒的总结笔记,总结了笔者的20182019校招春招秋招算法机器学习深度学习自然语言处理CC++Python面试笔记,特此来推荐给大家!github地址:https://github.com/imhuay/Algorithm_Interview_Notes-Chinese看到这样可爱的排版,是不是很动心呀!哈哈,我反正已经动心了。正手star,反手fork!你们看着办吧!机器学习目录机器学习基础机器学习实践机器学习算法集成学习具体看有:机器学习算法 深度学习目录深度学习基础深度学习实践CNNRNN优化算法序列建模深度学习整理备忘-术语表这里就不一一列出来了,选一个代表性的,大家看看(来自深度学习整理): 自然语言处理目录深度查询理解NLP发展趋势自然语言处理基础句嵌入词嵌入多模态视觉问答-综述部分章节内容为:笔试面经 前面的都是知识,但是战场上是怎样的呢?我感觉大家也都在期待这个,那么我们就看看笔者为大家准备的面试细节吧!是不是自己的小心心已经蠢蠢欲动啦!好啦,还有数学算法,算法,编程语言

  • 聊聊dubbo spring boot的DubboShutdownMetadata

    序本文主要研究一下dubbospringboot的DubboShutdownMetadataAbstractDubboMetadatadubbo-spring-boot-project-2.7.3/dubbo-spring-boot-compatible/actuator/src/main/java/org/apache/dubbo/spring/boot/actuate/endpoint/metadata/AbstractDubboMetadata.javapublicabstractclassAbstractDubboMetadataimplementsApplicationContextAware,EnvironmentAware{ ​ protectedApplicationContextapplicationContext; ​ protectedConfigurableEnvironmentenvironment; ​ privatestaticbooleanisSimpleType(Class<?>type){ returnisPrimitiveOrWrapp

  • Linux上传文件和下载文件命令行方式

    在Linux主机上,安装上传下载工具包rz及sz只需要安装下面这个包即可,执行下面的安装命令yuminstall-ylrzsz复制上传在Linux命令行下输入rz,rz复制输入rz命令后,会弹出对话框,选择你要上传的文件,选择打开就上传到Linux主机。上传的文件在当前命令行的目录下下载在linux下输入命令sz文件名复制然后就会跳出一个下载在哪个路径的框

  • 腾讯云TDSQLMySQL版新购分布式数据库实例询价分布式数据库

    1.接口描述接口请求域名:dcdb.tencentcloudapi.com。 本接口(DescribeDCDBPrice)用于在购买实例前,查询实例的价格。 默认接口请求频率限制:20次/秒。 APIExplorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。您可查看每次调用的请求内容和返回结果以及自动生成SDK调用示例。 2.输入参数以下请求参数列表仅列出了接口请求参数和部分公共参数,完整公共参数列表见公共请求参数。 参数名称 必选 类型 描述 Action 是 String 公共参数,本接口取值:DescribeDCDBPrice。 Version 是 String 公共参数,本接口取值:2018-04-11。 Region 是 String 公共参数,详见产品支持的地域列表。 Zone 是 String 欲新购实例的可用区ID。 Count 是 Integer 欲购买实例的数量,目前支持购买1-10个实例 Period 是 Integer 欲购买的时长,单位:月。 ShardNodeCount 是 Inte

  • flink-cdc同步mysql数据到hbase

    本文首发于我的个人博客网站等待下一个秋-Flink 什么是CDC? CDC是(ChangeDataCapture变更数据获取)的简称。核心思想是,监测并捕获数据库的变动(包括数据或数据表的插入INSERT、更新UPDATE、删除DELETE等),将这些变更按发生的顺序完整记录下来,写入到消息中间件中以供其他服务进行订阅及消费。 1.环境准备 mysql hbase flink1.13.5onyarn 说明:如果没有安装hadoop,那么可以不用yarn,直接用flinkstandalone环境吧。 2.下载下列依赖包 下面两个地址下载flink的依赖包,放在lib目录下面。 flink-sql-connector-hbase-1.4_2.11-1.13.5.jar flink-sql-connector-mysql-cdc-1.4.0.jar 如果你的Flink是其它版本,可以来这里下载。 我是flink1.13,这里flink-sql-connector-mysql-cdc,需要1.4.0以上版本。 如果你是更高版本的flink,可以自行https://g

  • 黑马-Jenkins篇

    整个项目流程和我目前公司部署类似,专门来学Jenkins-Pipeline语法的,jenkins安装啥的以后需要了再补充吧。 参考链接:https://www.bilibili.com/video/BV1kJ411p7mV?p=92&vd_source=510ec700814c4e5dc4c4fda8f06c10e8 目录?1.基本概念1.1.Pipeline1.1.1基本简介1.1.2构建触发器1.2SonarQube1.2.1基本概念1.2.2基本安装1.2.3.1安装流程1.2.3整合流程1.3Docker1.3.1DockerFile基本命令1.3.2Docker-个人项目1.4Habor?2.总体流程2.1流程描述 ?1.基本概念 1.1.Pipeline 1.1.1基本简介 ​ pipeline是groovy语言开发,用于构建jenkins发布流程,一般放在项目目录下,也可以放在jenkins网站里。一般用声明式pipeline(语法是stages),也有脚本式pipeline(语法是node) 1.1.2构建触发器 ​ 可以利用jenkins网站

  • 金融篇--跌价也可以赚钱(原创)

          人们都有一种惯性思维,认为买卖商品赚钱,通常都是低价买进,在溢价卖出,然后在赚取其中的差价。呵呵,其实,商品价格下跌,其实也孕育着赚钱的机会。举个例子,现在假如米价是10元/斤,委实有点高哈,你收到消息,3天后,政府将要出台一些控制米价的政策措施,米价将要大幅下跌,这时候,其实已经孕育这赚钱的机会。在你知道米价将要下跌的情况下,你去向米商去借米,借个1000斤,答应3天后还他1000斤(当然可以给点好处给米商。)你现在马上把这1000米到市场上按现价出售取得了1000斤*10元/斤=10000元,然后你持有10000元等上3天,结果果然如你所料,政府开始控制米价,米价下跌到5元/斤,然后你在用5000元取买1000斤按照约定还给米商,这样你就直接净赚10000-5000=5000元。当然如果,米价没有下跌,而是反而上涨到15元/斤,你在买1000斤回来还米商就得花掉15000,你就得亏上5000元,呵呵这个原理,就是金融市场上的卖空,买跌。

  • 第二阶段团队冲刺第二天

    站立会议计划内容:   第二天,我们团队对于界面的布局进行统一的规划,以防止最后做完划分的任务连接到一块出现画风不一致别扭的现象。 任务看板:     站立会议照片:   燃尽图:

  • 自动适应label

     CGFloatbtnH=300;   NSString*text=@"你在这是NSString的对象方法,一个字符串实例调用该方法时,方法会通过传入的参数返回一个CGRect型数据,这个数据的size就是此时字符串显示成文本的尺寸。家";   UILabel*label =[[UILabelalloc]init];   label.text=text;   label.numberOfLines=MAXFLOAT;   label.backgroundColor=[UIColorwhiteColor];   label.textColor=[UIColorblackColor];   CGRect rect=[label.textboundingRectWithSize:CGSizeMake(btnH,MAXFLOAT)options:NSStringDrawingUsesLineFragmentOriginattr

  • hduoj4311

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4311 题解: array1=[(-4,-1), (-1,-2), (2,-4), (0,2), (0,3), (5,-2)] array2=[(0,0), (2,0), (-5,-2), (2,-2), (-1,2), (4,0)] array3=[(-5,1), (-1,3), (3,1), (3,-1), (1,-1)] array4=[(-1,-1), (-3,2), (-4,4), (5,2), (5,-4), (3,-1), (4,3), (-1,-2), (3,4), (-2,2)] defcal_min_sum(_array:list): sum_dict={} _array.sort() now_sum=sum([abs(a-_array[0])forain_array]) sum_dict[_array[0]]=now_sum foriinrange(1,len(_array)): #left_inc=abs(_array[i-1]-_array[i])*(i+1)

  • Java 学习:多线程

    线程 Java给多线程编程提供了内置的支持。一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务。 创建线程: Java提供了三种创建线程的方法: 通过实现Runnable接口; 通过继承Thread类本身; 通过Callable和Future创建线程。 通过实现Runnable接口创建线程: publicclassDemo{ publicstaticvoidmain(String[]args){ //创建实现了Runable接口的任务对象 Test1t=newTest1(); //创建线程将任务对象作为Thread的构造参数交给线程 Threadthread=newThread(t); //调用线程的start方法开启线程,JVM会自动调用任务对象的run方法执行任务 thread.start(); } } /** *创建线程1通过实现Runnable接口; */ classTest1implementsRunnable{ /** *实现Runnable接口的run方法 */ @Override publicvoidrun

  • Fall with Tree(hdu7046)

    FallwithTrees https://acm.hdu.edu.cn/showproblem.php?pid=7046 题意: ​ Fall想画一棵完美的二叉树。 ​ 我们首先规定树中具有相同深度的所有节点在平面上也具有相同的y坐标。将具有相同深度的节点定义为相同级别的节点,则完美二叉树具有四个属性。 ​ -这是一个完整的二叉树。 ​ -每个相邻标高上两个节点的y坐标之间的差值为常数。 ​ -同一级别上两个相邻节点的x坐标之间的差是恒定的。 ​ -每个节点的x坐标是其子节点的x坐标的平均值。 ​ Fall已经绘制了这个二叉树的根节点及其左右子节点。现在Fall打算画出总共k层,然后把二叉树砍掉,然后粘贴到墙上,所以他想知道这个完美二叉树所有节点的凸包面积是多少。 思路:暴力求解,找到公式 代码: #include<bits/stdc++.h> usingnamespacestd; #defineintlonglong #definemod998244353 doubleqpow(doublex,inty)//快速幂 { doubleans=1; whi

  • 句子的成分

    1、谓语 实义动词--->具有实际的意义 系表结构--->系动词+表语 系动词:联系事物和其属性,联系事物和其特征 表语:表示主语特征,属性和状态的成分 2、宾语(动宾,介宾) 动作的对象 介词连接的对象 3、定语(前定、后定、分定) 修饰限定名词,并使之更加明确具体的成分 词的前面(前置定语) 形容词作定语 词的后面(后置定语) 形容词短语 现在分词短语--->V+ing 过去分词短语--->V+ed 不定式短语---> to+V 介词短语 副词(特殊)eg.Astudenghere 从句 4、同位语 同位补充解释说明 5、状语 修饰动词,表示其发生的背景或修饰形容词副词表示其程度的成分 状语前置一般放在句首或者所修饰动词的前面 6、补语 对宾语或主语补足说明的成分

  • Spring Cloud第七篇 | 声明式服务调用Feign

    本文是SpringCloud专栏的第七篇文章,了解前六篇文章内容有助于更好的理解本文: SpringCloud第一篇|SpringCloud前言及其常用组件介绍概览 SpringCloud第二篇|使用并认识Eureka注册中心 SpringCloud第三篇|搭建高可用Eureka注册中心 SpringCloud第四篇|客户端负载均衡Ribbon SpringCloud第五篇|服务熔断Hystrix SpringCloud第六篇|Hystrix仪表盘监控HystrixDashboard 一、Feign是什么    Feign是Netflix公司开发的一个声明式的REST调用客户端;Ribbon负载均衡、Hystrⅸ服务熔断是我们SpringCloud中进行微服务开发非常基础的组件,在使用的过程中我们也发现它们一般都是同时出现的,而且配置也都非常相似,每次开发都有很多相同的代码,因此SpringCloud基于NetflixFeign整合了Ribbon和Hystrix两个组件,让我们的开发工作变得更加简单,就像Springboot

相关推荐

推荐阅读