VUEX 使用学习三 : mutations

转载请注明出处:

  在 Vuex 中 store 数据改变的唯一方法就是提交 mutationsmutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离。

  通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化

  示例:

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
     // 事件类型 type 为 increment
    increment (state) { 
      // 变更状态
      state.count++
    }
  }
})

 

第一种使用方式:

  this.$store.commit() 是触发mutations的第一种方式,

  示例:

// 方法
mutations:{
  // 加的方法
  increment(state,addcounter){
    state.counter += addcounter
  },
  // 减的方法
  decrement(state,subcounter){
    state.counter -= subcounter
  }
},

  使用:

<template>
  <div>
    <h2>Vuex第四个页面</h2>
    <button @click="addnum(5)">+</button>
    <button @click="subnum(5)">-</button>
    <p>{{$store.state.counter}}</p>
  </div>
</template>

<script>
  export default {
    name: "Vuexfour",
    methods:{
      addnum(addcounter){
        this.$store.commit("increment",addcounter)
      },
      subnum(subcounter){
        this.$store.commit("decrement",subcounter)
      }
    }
  }
</script>

第二种方式 mapMutations

  通过以函数映射的方式

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

import {mapMutations} from 'vuex'

    通过刚才导入的mapMutations函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性

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

methods:{ ...mapMutations(['add']) }

    示例:

<script>
import { mapMutations } from 'vuex'
export default {
  computed:{
    count(){
      return this.$store.state.count
    }
  },
  methods:{
    ...mapMutations([//采用解构的方式引入
      'increment',
      'decrement'
    ])
  }
}
</script>

 

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

相关文章

  • win10系统显示打印机未连接到服务器,Win10系统连接打印机显示未指定设备的解决教程…

    大家好,又见面了,我是你们的朋友全栈君。打印机是我们在Win10打印机显示未指定设备的解决方法:1.运行Windows疑难解答–在Windows搜索框中键入疑难解答>单击搜索结果中的疑难解答。–单击右窗格中的“打印机”>选择“运行疑难解答”。–等待进程进行并重新启动计算机以查看是否解决了问题。2.更新打印机驱动程序–按键盘上的Windows徽标键+R>在“运行”框中键入devmgmt.msc,然后按Enter键以打开“设备管理器”。–在顶部菜单中,单击“视图”>“选择显示隐藏的设备”。–展开“打印机”菜单>右键单击可用设备>选择“更新驱动程序”。–或者,您可以选择卸载驱动程序,重新启动计算机,它将自动重新安装打印机的驱动程序。3.卸下然后安装打印机–首先,转到打印机的制造商网站,下载适用于您设备的最新驱动程序。–按键盘上的Windows徽标键+R>在“运行”框中键入devmgmt.msc,然后按Enter键以打开“设备管理器”。–单击顶部菜单上的查看>选择显示隐藏的设备。–展开“打印机”菜单>右键单击您的设备>选择“卸载设备”

  • page指令的用法,重要属性是什么?

    1.page指令(例如<%@page...):下面列举一些重要常用属性:i)import="package.class",或者import="package.class1,...,package.classN":  用于指定导入哪些包(其实jsp就是一个servlet),例如:<%@pageimport="java.util.*"%>ii)isThreadSafe="true|false"  默认值true,单个Servlet实例的多个线程处理多个用户请求。如果取false,表明jsp转成的Servlet应该实现SingleThreadModel。iii)session="true|false"  defaultvalueistrue.如果取false,表明肯定不会用到Session,试图访问变量session将导致JSP转换成Servlet时出错,这样可以节约资源。但一旦忘了,就错了。iiii)info="message"  message可以通过getSer

  • 详解:33案例(qq新闻)

    核心之点:counter:是css计数器,只能跟content属性在一起使用的时候才起作用,而content属性专用在before/after伪元素上 核心之点:我举个例子把,好吧<style> .box{width:300px;height:200px;background:#000;color:#fff;padding:30px;} p{font-size:20px;counter-reset:count4;} p:after{ content:counter(count); } </style> <divclass="box"> <p>3的后面是</p> </div>复制如果p只有一个的话,就可以设counter-reset:count;在p里面,如果很多的p的话,那不能了,因为设的话,就代表一次设完就具有重复性了呀(注意点) 问题:12345678910那里是用什么代码做的呀, 好,这位同学你问到核心点了,很好 counter-reset:count; counter-incremen

  • 从零到一教你基于vue开发一个组件库

    前言Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完从0到1教你搭建前端团队的组件系统之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文章的补充,本文来总结一下如何搭建基于vue的组件库.虽然笔者有近2年没有从事vue的开发了,但平时一直在关注vue的更新和发展,笔者一直认为技术团队的组件化之路重点在于基础架构的搭建以及组件化的设计思想,我们完全可以采用不同的框架实现类似的设计,所以透过现象看本质,思想才是最重要的.本文主要教大家通过使用vue-cli3一步步搭建一个组件库并发布到npm上,但笔者认为重点不在于实现搭建组件库的具体方式,而在于设计组件库的思想和取舍.你将收获使用vue-cli3搭建团队的组件库并发布到npmnpm发包的常用基础知识相关资料从0到1教你搭建前端团队的组件系统(高级进阶必备)一张图教你快速玩转vue-cli3vue项目实战经验汇总正文本文假设大家对vue有一定的了解,并熟悉vue-cli3的配置.首先我们在搭建组件库的时候,一定要清楚是否有必要搭建,如果项目是一次性的或者不同项目中不存在可复用的组件,

  • Python官方最后通牒:Python 2传奇20年将落幕,Python 3接力!

    编辑:鹏飞|来源:新智元 【导读】一代传奇Python2落幕,将于3个半月后(2020年元旦当天)停止维护,被Python3全面取代。这意味着目前还在使用Python2的大量用户,将面临两种选择:要么继续使用,未来不再得到任何安全更新、bug修复;要么冒险升级到Python3。终于,Python官方发出了最后通牒! Python官方非常正式的在官网上发表一封公开信,再次强调Python2将于2020年元旦停止维护!之后,官方将不会再对任何bug、安全漏洞进行任何更新或者修复。这就意味着,如果你还想继续使用Python2,再碰到问题就只能自己想办法了。此文一出,再次在圈内掀起了一波热潮。当然,这并不意味着到时候Python2就不能用了!所以Python官方也用了“垂暮”而非“关停”来定义,也是非常有画面感了。作为一个5年前就“应该”退役的老版本,Python2诞生于2000年,如今已走过生命中的第二十个年头!这二十年来,Python2见证了Python从默默无闻到超越Perl、C++等,和Java、C三足鼎立,成为世界上使用人数最多、上升最快的语言之一。可以说,Python2是铸就Pyt

  • Leetcode 507. Perfect Number

    版权声明:博客文章都是作者辛苦整理的,转载请注明出处,谢谢!https://blog.csdn.net/Quincuntial/article/details/81069527文章作者:Tyan 博客:noahsnail.com|CSDN|简书1.Description2.SolutionclassSolution{ public: boolcheckPerfectNumber(intnum){ if(num==1){ returnfalse; } intsum=1; introot=sqrt(num)+1; for(inti=2;i<root;i++){ if(num%i==0){ sum+=i; if(i*i!=num){ sum+=num/i; } } } returnsum==num; } };复制Referencehttps://leetcode.com/problems/perfect-number/description/

  • 菜菜从零学习WCF十(序列化)

    前言 本次课程的主要内容包括以下四格部分:DataContractSerializer、序列化、反序列化、XmlSerializer第一部分--DataContractSerializer WindowsCommunicationFoundation(WCF)包括新序列化引擎DataContractSerializer。DataContractSerializer可在.NETFramework对象和XML之间进行双向转换。在对.NETFramework对象进行序列化时,序列化程序了解各种序列化编程模型,包括新的数据协定模型。当对XML进行反序列化时,序列化程序使用XmlReader和XmlWriter类。在某些情况下(例如在使用WCF二进制XML格式时),序列化程序也支持XmlDictionaryReader和XmlDictionaryWriter类以使其能够生成优化的XML。WCF还包括一个伴随序列化程序NetDataContractSerializer。NetDataContractSerializer与BinaryFormatter和SoapFormatter序列化程序类似,因为

  • ES中文分词器之精确短语匹配(解决了match_phrase匹配不全的问题)

    分词器选择调研了几种分词器,例如IK分词器,ansj分词器,mmseg分词器,发现IK的分词效果最好。举个例子:词:<<是的>><span>哈<\span>撒多撒ئۇيغۇرتىلى王者荣耀sdsd@4342啊啊啊 Standard:是,的,span,哈,span,撒,多,撒,ئۇيغۇر,تىلى,王,者,荣,耀,sdsd,4342,啊,啊,啊,啊 mmseg_maxword:是,的,span,哈,span,撒,多,撒,ئ,ۇ,ي,غ,ۇ,ر,ت,ى,ل,ى,王者,荣耀,sdsd,4342,啊,啊,啊,啊 IK_max_word:是的,span,哈,span,撒,多,撒,王者,王,者,荣耀,荣,耀,sdsd,4342,sdsd@4342,啊啊啊,啊啊,啊,啊啊,啊 Ansj:<,<,是,的,>,>,<,span,>,哈,<,\,span,>,撒,多,撒,ئ,ۇ,ي,غ,ۇ,ر,ت,ى,ل,ى,王者,荣耀,sdsd,@,4342,啊,啊,啊,啊复制在上述例子中,IK和Mmsg用的同一

  • 以下哪一项是对CSMA/CA和CSMA/CD LAN控制通用的CSMA方法的适当描述?

    A.  检测载波信号并控制数据传输。 B.  获得具有传输权的消息(令牌)的终端传输数据。 C.  如果在数据传输过程中发生冲突,立即重新发送。 D.  即使在使用传输线时也可以传输数据。   ============================================ 正确答案:A,CSMA方法(CarrierSenseMultipleAccess)是一种在传输前尝试接收一次,确认其他节点是否正在传输,然后开始传输的载波侦听机制,在共享单一传输介质的网络中控制多路访问的传输过程用于传输和接收。CSMA很少单独使用,而是与其他碰撞检测/避免机制结合使用,例如用于以太网(有线局域网)的CSMA/CD和用于无线局域网的CSMA/CA。    

  • vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)

    Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题。 一、Vue   系列一已经用vue-cli搭建了Vue项目,此处就不赘述了。 二、Vue-router   Vue的路由,先献上文档(https://router.vuejs.org/zh-cn/)。   路由在全家桶里面定位是什么呢,创建单页应用!简单!我们知道Vuejs是一系列的组件组成应用,既然是组件那么就需要组合起来,将组件(components)映射到路由(routes),然后告诉vue-router在哪里渲染它们!   我们一般在APP.VUE文件里面使用router-view来告诉router在哪里渲染组件,如下图(keep-alive被我注释了后续系列继续讲):      组件的配置:(此处有多个文件夹是便于管理大的项目,模块化。对于小项目可以只要router下面的index.js就行)。   至于路由配置中的resolve和require还有exportdefault可以参考这篇文章(http://www.cnblogs.com/Nutrient-rich/p/7047877.html和Vue按需加载提

  • 《重构》的读后感

    重构是本好书作者优秀,作品优秀,翻译也很优秀。但是,无论多么好的翻译也无法完整传达作者的原意。因此,读之前最好准备英文和中文两个版本,中文读不懂的地方就换英文,英文读的累的地方就换中文。充分利用自己在两种语言上知识储备,可以使读这本书产生事半功倍的效果。重构是由需求驱动的为什么要重构?不仅仅是个人或团体的喜好(感性驱动),还应该是由客户的需求变更导致项目迭代出现困难,而重构正是解决困难的好办法,于是推动重构(理性驱动)。当然,作为重构刚刚入门的程序员一定会到处使用这个大杀器,但是随着技术和经验的成熟,应该走向顺应需求的重构,满足客户需求才是项目的根本。重构要有具体的目标目标明确,拒绝诱惑。重构的过程也是熟悉业务的过程,检查错误的过程重构要把大目标分解成许多个小目标因为每个小目标才不会超出自己的控制能力,出现错误后也更容易回退。重构的每个小目标最好能够具备有效地检测机制重构的大目标必须提供检验机制重构最好能使用GIT、JUnit等等好的重构工具辅助熟悉重构的理论知识,善用重构的工具。对于工具的理解可参考《工具的意义》

  • ZK

    说明 本篇文章存在的主要意义就是帮助我加深记忆顺利拿offer的,只符合我的阅读习惯,如有朋友搜到,仅做参考。 1.ZK的数据模型:节点的特性与应用 1.1节点的类型 zookeeper维护一个具有层次关系的数据结构,它非常类似于一个标准的文件系统,且只能以绝对路径访问,包括以下三种类型。 临时:随着客户端会话的断开而断开 持久:不会随着创建的客户端的断开而删除,除非显式的调用delete 有序:在节点上加上了序号,可以清晰的看到节点的创建顺序 1.2节点的状态结构 利用命令“stat节点”查看,节点包含的信息如下所示 1.3zk实现的锁 **悲观锁:通过创建一个节点的lock来实现,坏处就是会锁住这个资源,效率低下 **乐观锁:通过节点的版本号实现,利用CAS原理去更新节点的信息 2.发布订阅模式:如何使用watch机制实现分布式通知 2.1ZK机制的实现 通过向ZK客户端构造函数传递Watch实现 还可以通过getData、exists、getChildren实现 2.2客户端Watch注册实现过程 标记该会话是一个带有Watch事件的请求 将Watch事件存储到ZKWatchM

  • 2021百度之星初赛第一场

    2021百度之星初赛第一场 A 如果学姐讲题而且在能力范围内就补 C-鸽子 简单dp,没时间写了,被毒瘤数据结构卡了。 设dp[j]为当前枚举的操作(含之前枚举过的操作)上,对于第j个位置的最小暗箱操作次数。 如果不可行设dp[j]=-1,初始化dp[k]=0。 枚举当前操作时,不妨另当前允许交换的为位置u,v 对于u,v位置之外的dp值,由于我们要暗箱操作的次数尽可能地小,所以选择操作,所以dp值不变,不需要更改。 对于u,v,如果dp[u]=-1,dp[v]=-1,那么什么也不做。 如果dp[u]!=-1&&dp[v]==-1,那么dp[v]=dp[u]; ... 四种情况,代码里列的很清楚。 intdp[100005]; voidsolve(){ intn,m,k,u,v; scanf("%d%d%d",&n,&m,&k); fill(dp+1,dp+n+1,-1); dp[k]=0; while(m--){ scanf("%d%d",&u,&v); if(dp[u]==-1&&dp[v]==-1)cont

  • JDBC数据源连接池的配置和使用实例

    个人学习参考所用,勿喷!   使用JDBC建立数据库连接的两种方式: 1.在代码中使用DriverManager获得数据库连接。这种方式效率低,并且其性能、可靠性和稳定性随着用户访问量得增加逐渐下降。 2.使用配置数据源的方式连接数据库,该方式其实质就是在上述方法的基础上增加了数据库连接池,这种方式效率高。   数据源连接池的方式连接数据库与在代码中使用DriverManager获得数据库连接存在如下差别: 1)数据源连接池的方式连接数据库是在程序中,通过向一个JNDI(JavaNamingand DirectoryInterface)服务器查询,即调用Context接口的lookup()方法,来得到DataSource对象,然后调用DataSource对象的getConnection()方法建立连接 2)为了能重复利用数据库连接对象,提高对请求的响应时间和服务器的性能,采用连接池技术.连接池技术预先建立多个数据库连接对象,然后将连接对象保存到连接池中,当客户请求到来时,从池中取出一个连接对象为客户服务,当请求完成时,客户程序调用close()方法,将连接

  • 前端页面之间传递数据

    在前端多页面开发过程中,会经常在页面与页面中间跳转,在跳转过程中,总有些数据是要传递的,当然我们可以用locationStorage对象来存储,也可以自己生成对象,下挂window对象来传递,这些本次暂不讨论。 我们讨论用URL来传递数据的情况: 假设A页面要跳转到B页面,这个过程中要传递一个简单的JSON对象类型: Student={name:"wsp",age:"24"}复制 浏览器时不支持传递Object对象的,只支持String类型的数据,故我们要对这个JSON对象进行序列化:使用JSON.stringify方法 StriStu=JSON.stringify(Student);复制 序列化之后就可以进行跳转链接了: location="b.html?Student="+StriStu 复制 但是这个时候会发现浏览器URL是这样显示的: b.html?Student={"name":"wsp","age":"24"}复制 这样显然是我们不希望的:因为如果有中文字符,浏览器会对字符进行编码,这样我们在b.html就解析不出了,而且这样看起来很不专业,那么我们就要在传

  • 类定义(课下选做)

    类定义(课下选做) 要求 Book类包含书名,作者,出版社和出版日期 getter,setter 至少三个构造方法,接收并初始化这些数据 覆盖toString方法,返回良好的含有多行的书的描述信息 覆盖equals方法,书名,作者,出版社和出版日期完全一致才说明两本书是一样的。 创建一个测试类Bookshelf 设计思路 首先在Book类中定义所需要的变量,构造方法 定义getter,setter方法 重难点就在于toString,equals方法的重写,以前在课上测试过 toString()方法的重写,返回重写的字符串即可。publicStringtoString(){returnstr;} Object类中的equals方法:用于检测一个对象是否等于另外一个对象,源码如下: publicbooleanequals(Objectobj){ return(this==obj); } 复制 实际处理中,若要比较两个对象是否相等,一般需要重写equals方法 显示参数命名为otherObject,稍后转化成other变量 publicbooleanequals(Objec

  • java学习笔记(二):枚举值

    枚举值的作用:枚举限制了变量要有一些预先定义的值,运用枚举值可以大大减少你的代码中的漏洞,举例来说,如果我们想为一家鲜榨果汁店编个程序,就可以将杯子的尺寸限制为小中和大。这样就可以确保人们不会定大中小尺寸之外的了。 1packagetest; 2 3publicclassJuice{ 4publicstaticvoidmain(String[]args){ 5FreshJuicejuice=newFreshJuice(); 6juice.size=FreshJuice.FreshJuiceSize.LARGE; 7System.out.println("size:"+juice.size); 8} 9} 10classFreshJuice{ 11enumFreshJuiceSize{SMALL,MEDIUM,LARGE} 12FreshJuiceSizesize; 13}复制 上述例子会输出如下结果: size:LARGE 复制   

  • JVM超神之路-实战调优

    实战调优 1、你在项目中都使用了哪些参数打印GC? 2、常用的调优工具有哪些? 3、如果有一个系统,内存一直消耗不超过10%,但是观察GC日志,发现FGC总是频繁产生,会是什么引起的? 4、线上一个系统跑一段时间就栈溢出了,怎么办? 5、系统CPU经常100%,如何调优? 6、系统内存飙高,如何查找问题? 7、大型项目如何进行性能瓶颈调优 8、你实际遇到调优的场景 GC常用参数 Parallel常用参数 CMS常用参数 G1常用参数 四、实战调优 1、你在项目中都使用了哪些参数打印GC? 具体的参数名称记不清楚了,但是我一般在项目中输出详细的GC日志,并加上可读性强的GC日志的时间戳。特别情况下我还会追加一些反映对象晋升情况和堆详细信息的日志,这些会单独打到gc.log文件中用来排查问题。另外,OOM时自动Dump堆栈,我一般也会进行配置。 2、常用的调优工具有哪些? JDK内置的命令行:jps(查看jvm进程信息)、jstat(监视jvm运行状态的,比如gc情况、jvm内存情况、类加载情况等)、jinfo(查看jvm参数的,也可动态调整)、jmap(生成dump文件的,在dump的时

  • 程序测试与调试

       测试与调试   一.  背景和目的         随着现代科学技术的进步,人类社会正逐渐走向信息化,图书馆拥有丰富的文献信息资源,是社会系统的重要组成部分,在信息社会中作用愈来愈重要,我国图书馆计算机等信息技术的应用起步于20世纪70年代末期,随着改革开放的步伐得迅速发展,特别是90年代以后,我国图书馆信息网络建设取得了较大发展图书馆信息化建设迈向了一个新台阶。        我们的软件工程课程设计要求应用软件工程的方法对我们的项目进行详细的需求分析、概要设计、详细设计以及进行必要的测试,旨在让程序能够实现读者管理功能、采编管理功能、流通管理功能、统计管理功能和查询管理功能。在此基础上让程序能够实现图书管理的自动化,帮助广大师生更好的管理和使用图书,提高图书在信息时代的作用。为使图书管理工作科学化、规范化,就必须采用计算机辅助管理,从而减少人力的投入,由系统对入库图书进行自动分类、

  • 将Boost库添加到Visual Studio 2017

    在windows环境中,一般比较推荐的打包软件的方式是,将自己所需要的共享库放在软件自己的文件夹中,并且避免与其它的软件共用。除非是微软的官方组件,比如微软自家的VCRuntime。 Boost库在windows平台的使用,一般也是推荐直接静态链接,而非是使用动态库。并且Boost库时如些强大,以致于你使用了之后,不需要手动在VS中配置你需要链接的库文件,而是由头文件搞定这一切,除非你用至的Boost库用到了微软自家的库,但是默认这个库又没有配置到项目中。 废话就说到这里,下面给出具体的操作过程。 第一步,当然是构建我们的Boost库了 打开VS的命令行(在开始菜单里,我这里是中文版的,名称是“适用于VS2017的x64本机工具命令提示”),进入到我们的Boost库主目录(下载好的Boost库,解压后的目录)。 首先构建Boost自己的构建工具b2和bjam等,然后再调用构建工具来完成构建,为了方便,我们直接写个批处理脚本吧。 1bootstrap 2b2-j%NUMBER_OF_PROCESSORS%toolset=msvc-14.1address-model=32threadin

  • 黑盒、白盒、灰盒测试的基本概念

    黑盒:   对于一段程序,对其测试时,不需要知道内部结构和特性,在输入接口处输入激励,观察输出是否正确。   主要用于软件界面和功能测试。   实际应用中,由于输入为无穷个,不仅要测试所有合法的输入,也要测试不合法但是可能发生的输入。   白盒:   白盒测试也称结构测试和逻辑驱动测试,知道程序内部结构,验证内部每条通路是否能正常工作。   也就是穷举路径测试,从检查程序的逻辑出发。主要用于软件验证。   但是,   第一,穷举路径测试决不能查出程序违反了设计规范,即程序本身是个错误的程序。   第二,穷举路径测试不可能查出程序中因遗漏路径而出错。   第三,穷举路径测试可能发现不了一些与数据相关的错误。    灰盒:   介于白盒和黑盒之间的测试,结合外部接口、功能和内部逻辑、路径,根据程序实际情况,进行测试。   本文转自:http://www.eetop.cn/blog/html/28/1561828-438324.html 在FPGA验证技术中: 黑盒验证 如果验证人员对于设计的细节缺乏认识,那么黑盒验证是一种合适的方式。因为验证环境只需

相关推荐

推荐阅读