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

如果您闲的没事干去两个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');  } }});

优点

缺点

二、组件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