Vue.js應(yīng)用的AJAX請(qǐng)求數(shù)據(jù)模式有哪些

這篇文章將為大家詳細(xì)講解有關(guān)Vue.js應(yīng)用的AJAX請(qǐng)求數(shù)據(jù)模式有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在本文中，我將向您展示您可以在Vue應(yīng)用程序中實(shí)現(xiàn)AJAX的四個(gè)位置：

1、根實(shí)例
2、組件Components
3、Vuex actions
4、路線導(dǎo)航衛(wèi)士
5、另加：獎(jiǎng)金模式

我將解釋每個(gè)方法，舉一個(gè)例子，并涵蓋利弊。

一、根實(shí)例

在使用Vue框架時(shí)，您可以一開(kāi)始就從根實(shí)例發(fā)出所有AJAX請(qǐng)求，即寫(xiě)好所有的數(shù)據(jù)請(qǐng)求，并將所有狀態(tài)存儲(chǔ)在該實(shí)例中。如果任何子組件需要數(shù)據(jù)，它將會(huì)順著props中傳下來(lái)。如果子組件需要刷新數(shù)據(jù)，則將使用自定義事件來(lái)提示根實(shí)例請(qǐng)求它。

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');
  }
 }
});

優(yōu)點(diǎn)

• 將所有的AJAX邏輯和數(shù)據(jù)保存在一個(gè)地方。

• 保持您的組件“獨(dú)立性”，以便它們可以更加專(zhuān)注于展示。

缺點(diǎn)

• 隨著您的應(yīng)用擴(kuò)展，需要書(shū)寫(xiě)大量的“props”和自定義事件。

二、組件Components

在使用Vue框架時(shí)，組件負(fù)責(zé)管理自己的AJAX請(qǐng)求和獨(dú)立狀態(tài)。實(shí)際上，您可能需要?jiǎng)?chuàng)建幾個(gè)“容器組件”來(lái)管理本地組“展示組件”的數(shù)據(jù)。

例如，filter-list可能是一個(gè)容器組件包裝filter-input和filter-reset，它們作為展示組件。filter-list將包含AJAX數(shù)據(jù)邏輯，并且將管理該組中所有組件的數(shù)據(jù)，通過(guò)props和事件進(jìn)行通信。

為了簡(jiǎn)化此架構(gòu)的實(shí)現(xiàn)，您可以將任何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' ]
});

優(yōu)點(diǎn)

• 保持組件脫鉤和可重用。

• 在任何時(shí)候和任何地點(diǎn)都可以獲取數(shù)據(jù)。

缺點(diǎn)

• 與其他組件或組件組不通信數(shù)據(jù)。

• 組件可能會(huì)產(chǎn)生很多累贅的職責(zé)和重復(fù)的功能。

三、Vuex actions

在使用Vue框架時(shí)，您可以在Vuex store中管理狀態(tài)和AJAX邏輯; 組件可以通過(guò)dispatch方法操作來(lái)請(qǐng)求新數(shù)據(jù)(store.dispatch將用于觸發(fā)actions動(dòng)作)。

如果您要使用此模式，最好從您的action中返回一個(gè)promise，以便對(duì)AJAX請(qǐng)求的解析做出反應(yīng)，例如隱藏加載微調(diào)器，重新啟用按鈕等。

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; }
 }
});

本人比較喜歡這種數(shù)據(jù)請(qǐng)求模式，因?yàn)樗芎玫胤蛛x了你的狀態(tài)和表現(xiàn)的邏輯。如果你正在使用Vuex，這是要走的路。如果你不使用Vuex，這模式可能是一個(gè)很好的理由。

優(yōu)點(diǎn)

• 所有的根組件架構(gòu)的優(yōu)點(diǎn)，不需要props 和自定義事件。

缺點(diǎn)

• 增加Vuex的開(kāi)銷(xiāo)。

四、路線導(dǎo)航衛(wèi)士

在使用Vue框架時(shí)，您的應(yīng)用程序分為多個(gè)頁(yè)面，當(dāng)路由更變時(shí)，將抓取頁(yè)面及其子組件所需的所有數(shù)據(jù)。

這種方法的主要優(yōu)點(diǎn)是它真正簡(jiǎn)化了您的UI。如果組件獨(dú)立獲取自己的數(shù)據(jù)，則當(dāng)組件數(shù)據(jù)以任意順序填充時(shí)，頁(yè)面將不可預(yù)測(cè)地重新呈現(xiàn)。

實(shí)現(xiàn)這一點(diǎn)的一個(gè)整潔的方法是在您的服務(wù)器上為每個(gè)頁(yè)面創(chuàng)建端點(diǎn)，例如/about，/contact與您的應(yīng)用程序中的路由名稱(chēng)相匹配。然后，您可以實(shí)現(xiàn)一個(gè)通用beforeRouteEnter鉤子，將所有數(shù)據(jù)屬性合并到頁(yè)面組件的數(shù)據(jù)中：

import axios from 'axios';

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

優(yōu)點(diǎn)

• 使UI更可預(yù)測(cè)。

缺點(diǎn)

• 總體來(lái)說(shuō)，直到所有數(shù)據(jù)準(zhǔn)備就緒了 ,頁(yè)面才能呈現(xiàn)。

• 如果不使用路線，這模式?jīng)]有太多的幫助。

獎(jiǎng)金模式：將第一個(gè)AJAX調(diào)用的服務(wù)器渲染到頁(yè)面中

建議在初始頁(yè)面加載時(shí)使用AJAX來(lái)檢索應(yīng)用程序狀態(tài)，因?yàn)樗枰~外的往返服務(wù)器，這將延遲應(yīng)用程序的渲染。

相反，將初始應(yīng)用程序狀態(tài)注入HTML頁(yè)面的內(nèi)聯(lián)腳本中，以便應(yīng)用程序作為全局變量在需要時(shí)可用。

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

然后，AJAX可以更適合地用于后續(xù)數(shù)據(jù)提取。

關(guān)于“Vue.js應(yīng)用的AJAX請(qǐng)求數(shù)據(jù)模式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。