如果您閑的沒事干去兩個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