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 浮动层菜单收藏
Jan 16 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
JavaScript 去重和重复次数统计
Mar 31 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
linux下 C语言对 php 扩展
2008/12/14 PHP
初品cakephp 入门基础
2012/02/16 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
php生成mysql的数据字典
2016/07/07 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
python实现计算倒数的方法
2015/07/11 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
租房协议书范本
2014/04/09 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
python字符串常规操作大全
2021/05/02 Python