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 相关文章推荐
js事件(Event)知识整理
Oct 11 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 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
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
javascript闭包的理解
2015/04/01 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Python实现微信表情包炸群功能
2021/01/28 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
护士岗位职责
2014/02/16 职场文书
婚礼司仪主持词
2014/03/14 职场文书
公开承诺书格式
2014/05/21 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
保护动物的宣传语
2015/07/13 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS