浅谈Vue.js应用的四种AJAX请求数据模式


Posted in Javascript onAugust 30, 2017

如果您闲的没事干去两个Vue.js开发人员:“在Vue应用中使用AJAX的正确姿势是咋样的?”,您将会得到三种或更多的不同回答。

Vue.js官方没有提供实现AJAX的指定方式,并且有许多不同的设计模式可以被有效地使用。每个都有自己的利弊,应根据要求进行判断。你甚至可以同时使用几个!

在本文中,我将向您展示您可以在Vue应用程序中实现AJAX的四个位置:

1、根实例
2、组件Components
3、Vuex actions
4、路线导航卫士
5、另加:奖金模式

我将解释每个方法,举一个例子,并涵盖利弊。

一、根实例

在使用Vue框架时,您可以一开始就从根实例发出所有AJAX请求,即写好所有的数据请求,并将所有状态存储在该实例中。如果任何子组件需要数据,它将会顺着props中传下来。如果子组件需要刷新数据,则将使用自定义事件来提示根实例请求它。

new Vue({
 data: {
  message: ''
 },
 methods: {
  refreshMessage(resource) {
   this.$http.get('/message').then((response) {
    this.message = response.data.message;
   });
  }
 }
})

Vue.component('sub-component', {
 template: '<div>{{ message }}</div>',
 props: [ 'message' ]
 methods: {
  refreshMessage() {
   this.$emit('refreshMessage');
  }
 }
});

优点

  • 将所有的AJAX逻辑和数据保存在一个地方。
  • 保持您的组件“独立性”,以便它们可以更加专注于展示。

缺点

  • 随着您的应用扩展,需要书写大量的“props”和自定义事件。

二、组件Components

在使用Vue框架时,组件负责管理自己的AJAX请求和独立状态。实际上,您可能需要创建几个“容器组件”来管理本地组“展示组件”的数据。

例如,filter-list可能是一个容器组件包装filter-input和filter-reset,它们作为展示组件。filter-list将包含AJAX数据逻辑,并且将管理该组中所有组件的数据,通过props和事件进行通信。

为了简化此架构的实现,您可以将任何AJAX逻辑抽象为混合,然后在组件中使用mixin使其成为AJAX。

let mixin = {
 methods: {
  callAJAX(resource) {
   //...
  }
 }
};

Vue.component('container-comp', {
 // No meaningful template, I just manage data for my children
 template: '<div><presentation-comp :mydata="mydata"></presentation-comp></div>', 
 mixins: [ myMixin ],
 data() {
  return {
   //... 
  }
 },

});

Vue.component('presentation-comp', {
 template: '<div>I just show stuff like {{ mydata }}</div>',
 props: [ 'mydata' ]
});

优点

  • 保持组件脱钩和可重用。
  • 在任何时候和任何地点都可以获取数据。

缺点

  • 与其他组件或组件组不通信数据。
  • 组件可能会产生很多累赘的职责和重复的功能。

三、Vuex actions

在使用Vue框架时,您可以在Vuex store中管理状态和AJAX逻辑; 组件可以通过dispatch方法操作来请求新数据(store.dispatch将用于触发actions动作)。

如果您要使用此模式,最好从您的action中返回一个promise,以便对AJAX请求的解析做出反应,例如隐藏加载微调器,重新启用按钮等。

store = new Vuex.Store({
 state: {
  message: ''
 },
 mutations: {
  updateMessage(state, payload) {
   state.message = payload
  }
 },
 actions: {
  refreshMessage(context) {
   return new Promise((resolve) => {
    this.$http.get('...').then((response) => {
     context.commit('updateMessage', response.data.message);
     resolve();
    });
   });
  }
 }
});

Vue.component('my-component', {
 template: '<div>{{ message }}</div>',
 methods: {
  refreshMessage() {
   this.$store.dispatch('refeshMessage').then(() => {
    // do stuff
   });
  }
 },
 computed: {
  message: { return this.$store.state.message; }
 }
});

本人比较喜欢这种数据请求模式,因为它很好地分离了你的状态和表现的逻辑。如果你正在使用Vuex,这是要走的路。如果你不使用Vuex,这模式可能是一个很好的理由。

优点

  • 所有的根组件架构的优点,不需要props 和自定义事件。

缺点

  • 增加Vuex的开销。

四、路线导航卫士

在使用Vue框架时,您的应用程序分为多个页面,当路由更变时,将抓取页面及其子组件所需的所有数据。

这种方法的主要优点是它真正简化了您的UI。如果组件独立获取自己的数据,则当组件数据以任意顺序填充时,页面将不可预测地重新呈现。

实现这一点的一个整洁的方法是在您的服务器上为每个页面创建端点,例如/about,/contact与您的应用程序中的路由名称相匹配。然后,您可以实现一个通用beforeRouteEnter钩子,将所有数据属性合并到页面组件的数据中:

import axios from 'axios';

router.beforeRouteEnter((to, from, next) => {
 axios.get(`/api${to.path}`).then(({ data }) => {
  next(vm => Object.assign(vm.$data, data))
 });
})

优点

  • 使UI更可预测。

缺点

  • 总体来说,直到所有数据准备就绪了 ,页面才能呈现。
  • 如果不使用路线,这模式没有太多的帮助。

奖金模式:将第一个AJAX调用的服务器渲染到页面中

建议在初始页面加载时使用AJAX来检索应用程序状态,因为它需要额外的往返服务器,这将延迟应用程序的渲染。

相反,将初始应用程序状态注入HTML页面的内联脚本中,以便应用程序作为全局变量在需要时可用。

<html>
...
<head>
 ...
 <script type="text/javascript">
  window.__INITIAL_STATE__ = '{ "data": [ ... ] }';
 </script>
</head>
<body>
 <div id="app"></div>
</body>
</html>

然后,AJAX可以更适合地用于后续数据提取。

如果您有兴趣了解有关此架构的更多信息,请参阅作者的文章“避免此全面堆栈Vue / Laravel应用程序中的常见反模式”。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
如何理解Vue的render函数的具体用法
Aug 30 #Javascript
微信小程序之发送短信倒计时功能
Aug 30 #Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 #Javascript
hammer.js实现图片手势放大效果
Aug 29 #Javascript
js禁止表单重复提交
Aug 29 #Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 #Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 #Javascript
You might like
PHP获取数组最大值下标的方法
2015/05/12 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
JavaScript 数组详解
2013/10/10 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
js实现登录与注册界面
2017/11/01 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
解决yum对python依赖版本问题
2019/07/05 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
会计自荐书
2013/12/02 职场文书
环境工程专业自荐信
2014/03/03 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Python进行区间取值案例讲解
2021/08/02 Python