zoukankan      html  css  js  c++  java
  • 第5节:actions异步修改状态

    actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了,如果你不懂自己去百度查一下吧。(视频中有讲解)

    在store.js中声明actions

    actions是可以调用Mutations里的方法的,我们还是继续在上节课的代码基础上进行学习,在actions里调用add和reduce两个方法。

    在actions里写了两个方法addAction和reduceAction,在方法体里,我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。

    • context:上下文对象,这里你可以理解称store本身。
    • {commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。

    模板中的使用

    我们需要在count.vue模板中编写代码,让actions生效。我们先复制两个以前有的按钮,并改成我们的actions里的方法名,分别是:addAction和reduceAction。

    改造一下我们的methods方法,首先还是用扩展运算符把mapMutations和mapActions加入。

    你还要记得用import把我们的mapActions引入才可以使用。

    增加异步检验

    我们现在看的效果和我们用Mutations作的一模一样,肯定有的小伙伴会好奇,那actions有什么用,我们为了演示actions的异步功能,我们增加一个计时器(setTimeOut)延迟执行。在addAction里使用setTimeOut进行延迟执行。

    我们可以看到在控制台先打印出了‘我比reduce提前执行’这句话。

  • 相关阅读:
    业务需求、用户需求和功能需求
    乐观锁的两种实现方式
    数据字典
    freemarker(ftl)标签用法
    commons-lang常用方法
    前端与后端分离
    jar包导入本地maven库的操作
    本地打jar包到本地的Maven出库
    MyEclipse中好用的快捷键汇总整理
    简单的反编译class文件并重新编译的方法
  • 原文地址:https://www.cnblogs.com/jinsuo/p/8342300.html
Copyright © 2011-2022 走看看