溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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.js應用的AJAX請求數據模式有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
