站長資訊網
Vue沒有提供實現AJAX的正式方法，而且有許多不同的設計模式可以有效地使用。每種方法都有其優缺點，應該根據需求進行判斷。您甚至可以同時使用多個!
在本文中，我將向您展示在Vue應用程序中實現AJAX的四個地方:
-
根實例
-
組件
-
Vuex行動
-
路線導航警衛
我將解釋每種方法，給出一個例子，并討論其優缺點。
1、根實例
使用這種體系結構，您可以從根實例發出所有AJAX請求，并將所有狀態存儲在根實例中。如果任何子組件需要數據，它將作為輔助。如果子組件需要刷新數據，將使用自定義事件提示根實例請求它。
例子:
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邏輯和數據保存在一個地方。
-
保持組件“dumb”，這樣它們就可以專注于表示。
缺點：
-
隨著應用程序的擴展，需要大量的道具和定制事件。
2、組件
使用這種體系結構，組件負責獨立地管理它們自己的AJAX請求和狀態。在實踐中，您可能希望創建幾個“容器”組件，這些組件為它們自己的本地“表示”組件組管理數據。
例如，filter-list可能是包裝filter-input和filter-reset的容器組件，它們充當表示組件。filter-list將包含AJAX邏輯，并將管理該組中所有組件的數據，通過道具和事件進行通信。
為了使這個體系結構的實現更容易，您可以將任何AJAX邏輯抽象到mixin中，然后使用組件中的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' ] })
優點：
-
保持組件分離和可重用。
-
獲取所需數據的時間和地點。
缺點：
-
不容易與其他組件或組件組通信數據。
-
組件可能會有太多的職責和重復的功能。
3、Vuex行動
使用這種體系結構，您可以在Vuex存儲中管理狀態邏輯和AJAX邏輯。組件可以通過分派操作請求新數據。
如果您實現了這種模式，那么最好在操作中返回一個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，這可能是一個足夠好的理由。
優點：
-
根組件體系結構的所有優點，不需要道具和自定義事件。
缺點：
-
增加了Vuex的開銷
4、路線導航警衛
使用這種架構，您的應用程序將被分割為多個頁面，當路由更改時，將獲取頁面及其子組件所需的所有數據。
這種方法的主要優點是它確實簡化了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可以更恰當地用于后續數據獲取。
