vue 组件内获取actions的response方式


Posted in Javascript onNovember 08, 2019

最近使用在学习使用vuex,想利用vuex集中管理状态。在和后台进行数据交互的时候,必然会涉及接口的调用,此类异步操作,通常写在action里面:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use('Vuex');

const actions = {
 getComplete ({}) {
  return new Promise((resolve, reject) => {        
    Vue.http.get('XXXXXX').then((response) => {
      resolve(response);
     }).catch((response) => {
      reject(response);
     });
    });
  }
 }

export default new Vuex.Store({
 actions
})

这里将接口的请求放置在promise中,利用promise异步的特性,可以在子组件中获取到接口调用成功后返回的参数:

export default {
  ......
  created: function() {
    this.$store.dispatch('getComplete').then(response => {
      ......
    }).catch(response => {
      ......
    })
  }
}

除了这种方式,也可以使用mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store),具体使用方式详见:

传送门:https://vuex.vuejs.org/en/actions.html

以上这篇vue 组件内获取actions的response方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 #Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 #Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 #Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 #Javascript
Vuex中实现数据状态查询与更改
Nov 08 #Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 #Javascript
vue.js的简单自动求和计算实例
Nov 08 #Javascript
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
fgetcvs在linux的问题
2012/01/15 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
Joomla开启SEF的方法
2016/05/04 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
浅析javascript的return语句
2015/12/15 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
python读写文件操作示例程序
2013/12/02 Python
在Django中创建动态视图的教程
2015/07/15 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python操作Jira库常用方法解析
2020/04/10 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
保险公司晨会主持词
2014/03/22 职场文书
教师工作决心书
2015/02/04 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
最美乡村教师观后感
2015/06/11 职场文书
校长新学期寄语2016
2015/12/04 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
spring 项目实现限流方法示例
2022/07/15 Java/Android
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS