Vue核心概念Action的总结


Posted in Javascript onJanuary 18, 2019

Action 类似于mutation,不同在于:

- Action 提交的是mutation,而不是直接变更状态。

- Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时,你就知道 context 对象为什么不是 store 实例本身了。

代码实例

store.js

actions: {
    // 商品半价
    disCount (content) {
      // actions中通过commit()提交mutations中的goodsPriceHalve()函数
      content.commit('goodsPriceHalve')
    },
    // 异步的商品半价
    /**
     * disCountAsync ({commit}){
      setTimeout(() => {
        commit('goodsPriceHalve')
      },1000)
    } */
    disCountAsync ({commit}){
      setTimeout(() => {
        commit('goodsPriceHalve')
      },1000)
    },
    // 统一修改商品名字
    /* acyionChangeName()的第一个参数可以理解成是一个对象,第二个参数为事件传递过来的参数
    这个参数也需要传递给mutations中相对应的函数中*/
    acyionChangeName(content,payload){
      // 载荷形式
      content.commit('changeName',payload);
    },
    acyionChangeNameAsync (content,payload){
      setTimeout(() => {
        // 对象形式
        content.commit('changeName',payload.payload)
      },1000)
    }
  }

这里有同步也有异步,有载荷也有没有载荷。

page7.vue

<template>
  <div>
    <h2>我是第五个页面</h2>
    <div>
      <input type="text" placeholder="请输入商品的新名字" v-model="inpValue">
      <button @click="disCountPrice()">同步商品价格减半</button>
      <button @click="disCountPriceAsync()">异步商品价格减半</button>
    </div>
    <ul class="ul_list">
      <li v-for="item in goodsListHalv">
        <p class="name">商品:{{item.name}}</p>
        <p class="price">价格:¥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      inpValue:'',
    }
   },
   computed: {
     goodsListHalv(){
       return this.$store.state.goodsList;
     }
   },
   methods: {
    //  注意这里使用箭头函数可能会报错
    // 同步商品价格减半;触发事件提交actions中的disCount()函数
     disCountPrice: function(){
       this.$store.dispatch('disCount')
     },
     // 异步商品价格减半
     disCountPriceAsync: function(){
       this.$store.dispatch('disCountAsync')
     },
   }
  }
</script>

page8.vue

<template>
  <div>
    <h2>我是第六个页面</h2>
    <div>
      <input type="text" placeholder="请输入商品的新名字" v-model="inpValue">
      <button @click="acyionChangeName()">载荷修改商品的名字(字符串)</button>
      <button @click="acyionChangeNameAsync()">载荷修改商品的名字(对象)</button>
    </div>
    <ul class="ul_list">
      <li v-for="item in goodsListHalv" :key="item.id">
        <p class="name">商品:{{item.name}}</p>
        <p class="price">价格:¥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      inpValue:'',
    }
   },
   computed: {
     goodsListHalv(){
       return this.$store.state.goodsList;
     }
   },
   methods: {
    //  注意这里使用箭头函数可能会报错
    // 同步修改商品的名字;触发事件提交actions中的acyionChangeName()函数
     acyionChangeName: function(){
       this.$store.dispatch('acyionChangeName',this.inpValue)
     },
     // 异步修改商品的名字;对象 对象中包含两个属性type事件函数,payload参数
     acyionChangeNameAsync: function(){
       this.$store.dispatch({
         type:'acyionChangeNameAsync',
         payload:this.inpValue
       })
     },
   }
  }
</script>

乍一眼看上去感觉多此一举,我们直接分发 mutation 岂不更方便?实际上并非如此,还记得 mutation 必须同步执行这个限制么?Action 就不受约束!我们可以在 action 内部执行异步操作。

Actions 支持同样的载荷方式和对象方式进行分发。

效果图

Vue核心概念Action的总结

代码执行过程:

上面的Action执行过程是:按钮点击?>执行按钮点击事件方法?>执行$store.dispatch('avtions中的对应的函数名',参数)?>执行actions里面对应的方法?>执行mutations里面对应的方法?>修改state里面对应的数据?>页面渲染。

小结:

在Mutation中我们组件调用方法使用的是commit,在Action中组件使用的却是dispatch分发。看过vue1.x文档的,可能对commit和dispatch就有点感觉了,或者你看过socket。

这里主要要明白以下几点:

1.Mutation是同步的,Action是异步的;

2.Mutation是直接变更状态,Action提交的是mutation;

3.Actions和Mutation 都支持载荷方式和对象方式进行分发。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
js实现菜单跳转效果
Dec 11 Javascript
js取小数点后两位四种方法
Jan 18 #Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
js数组去重的方法总结
Jan 18 #Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 #jQuery
highCharts提示框中显示当前时间的方法
Jan 18 #Javascript
You might like
php基础教程 php内置函数实例教程
2012/08/21 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
js实现进度条的方法
2015/02/13 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
常用的js方法合集
2017/03/10 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
python的else子句使用指南
2016/02/27 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
详解Python做一个名片管理系统
2019/03/14 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
学生安全教育材料
2014/02/14 职场文书
个人培训自我鉴定
2014/03/28 职场文书
地质灾害防治方案
2014/05/14 职场文书
负责人任命书范本
2014/06/04 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
总结一些Java常用的加密算法
2021/06/11 Java/Android
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript