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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
Ext 表单布局实例代码
Apr 30 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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 批量添加多行文本框textarea一行一个
2014/06/03 PHP
php中file_exists函数使用详解
2015/05/08 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
axios基本入门用法教程
2017/03/25 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
园林设计师自荐信
2013/11/18 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
廉政教育心得体会
2014/01/01 职场文书
无故旷工检讨书
2014/01/26 职场文书
心理健康教育制度
2014/01/27 职场文书
校园安全检查制度
2014/02/03 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
还款承诺书范本
2015/01/20 职场文书
少先队工作总结2015
2015/05/13 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书