淺談Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式
如果您閑的沒事干去兩個(gè)Vue.js開發(fā)人員:“在Vue應(yīng)用中使用AJAX的正確姿勢(shì)是咋樣的?”,您將會(huì)得到三種或更多的不同回答。
Vue.js官方?jīng)]有提供實(shí)現(xiàn)AJAX的指定方式,并且有許多不同的設(shè)計(jì)模式可以被有效地使用。每個(gè)都有自己的利弊,應(yīng)根據(jù)要求進(jìn)行判斷。你甚至可以同時(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í),您可以一開始就從根實(shí)例發(fā)出所有AJAX請(qǐng)求,即寫好所有的數(shù)據(jù)請(qǐng)求,并將所有狀態(tài)存儲(chǔ)在該實(shí)例中。如果任何子組件需要數(shù)據(jù),它將會(huì)順著props中傳下來。如果子組件需要刷新數(shù)據(jù),則將使用自定義事件來提示根實(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ú)立性”,以便它們可以更加專注于展示。
缺點(diǎn)
- 隨著您的應(yīng)用擴(kuò)展,需要書寫大量的“props”和自定義事件。
二、組件Components
在使用Vue框架時(shí),組件負(fù)責(zé)管理自己的AJAX請(qǐng)求和獨(dú)立狀態(tài)。實(shí)際上,您可能需要?jiǎng)?chuàng)建幾個(gè)“容器組件”來管理本地組“展示組件”的數(shù)據(jù)。
例如,filter-list可能是一個(gè)容器組件包裝filter-input和filter-reset,它們作為展示組件。filter-list將包含AJAX數(shù)據(jù)邏輯,并且將管理該組中所有組件的數(shù)據(jù),通過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邏輯; 組件可以通過dispatch方法操作來請(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的開銷。
四、路線導(dǎo)航衛(wèi)士
在使用Vue框架時(shí),您的應(yīng)用程序分為多個(gè)頁面,當(dāng)路由更變時(shí),將抓取頁面及其子組件所需的所有數(shù)據(jù)。
這種方法的主要優(yōu)點(diǎn)是它真正簡(jiǎn)化了您的UI。如果組件獨(dú)立獲取自己的數(shù)據(jù),則當(dāng)組件數(shù)據(jù)以任意順序填充時(shí),頁面將不可預(yù)測(cè)地重新呈現(xiàn)。
實(shí)現(xiàn)這一點(diǎn)的一個(gè)整潔的方法是在您的服務(wù)器上為每個(gè)頁面創(chuàng)建端點(diǎn),例如/about,/contact與您的應(yīng)用程序中的路由名稱相匹配。然后,您可以實(shí)現(xiàn)一個(gè)通用beforeRouteEnter鉤子,將所有數(shù)據(jù)屬性合并到頁面組件的數(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)
- 總體來說,直到所有數(shù)據(jù)準(zhǔn)備就緒了 ,頁面才能呈現(xiàn)。
- 如果不使用路線,這模式?jīng)]有太多的幫助。
獎(jiǎng)金模式:將第一個(gè)AJAX調(diào)用的服務(wù)器渲染到頁面中
建議在初始頁面加載時(shí)使用AJAX來檢索應(yīng)用程序狀態(tài),因?yàn)樗枰~外的往返服務(wù)器,這將延遲應(yīng)用程序的渲染。
相反,將初始應(yīng)用程序狀態(tài)注入HTML頁面的內(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)此架構(gòu)的更多信息,請(qǐng)參閱作者的文章“避免此全面堆棧Vue / Laravel應(yīng)用程序中的常見反模式”。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法
- 詳解vue與后端數(shù)據(jù)交互(ajax):vue-resource
- Vue form 表單提交+ajax異步請(qǐng)求+分頁效果
- Vue-resource實(shí)現(xiàn)ajax請(qǐng)求和跨域請(qǐng)求示例
- vue使用Axios做ajax請(qǐng)求詳解
- 詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
- Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法
- vue使用ajax獲取后臺(tái)數(shù)據(jù)進(jìn)行顯示的示例
- Vue.js展示AJAX數(shù)據(jù)簡(jiǎn)單示例講解
- vue.js 表格分頁ajax 異步加載數(shù)據(jù)
- vue ajax 攔截原理與實(shí)現(xiàn)方法示例
相關(guān)文章
vue項(xiàng)目使用axios發(fā)送請(qǐng)求讓ajax請(qǐng)求頭部攜帶cookie的方法
今天小編就為大家分享一篇vue項(xiàng)目使用axios發(fā)送請(qǐng)求讓ajax請(qǐng)求頭部攜帶cookie的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問題解決
這篇文章主要介紹了Vue插件報(bào)錯(cuò):Vue.js is detected on this page.問題解決,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04vue項(xiàng)目?jī)?yōu)化之通過keep-alive數(shù)據(jù)緩存的方法
本篇文章主要介紹了vue項(xiàng)目?jī)?yōu)化之通過keep-alive數(shù)據(jù)緩存的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12詳解使用webpack打包編寫一個(gè)vue-toast插件
本篇文章主要介紹了詳解使用webpack打包編寫一個(gè)vue插件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11Vue實(shí)現(xiàn)開始時(shí)間和結(jié)束時(shí)間范圍查詢
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)開始時(shí)間和結(jié)束時(shí)間的范圍查詢,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08Vue?3.0?項(xiàng)目創(chuàng)建過程及解決方案
這篇文章主要介紹了Vue?3.0?項(xiàng)目創(chuàng)建過程,首先要確保電腦上已安裝node.js,確保已安裝?Vue?CLI,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12在Vue中實(shí)現(xiàn)地圖熱點(diǎn)展示與交互的方法詳解(如熱力圖)
隨著大數(shù)據(jù)和可視化技術(shù)的發(fā)展,地圖熱點(diǎn)展示越來越受到人們的關(guān)注,在Vue應(yīng)用中,我們通常需要實(shí)現(xiàn)地圖熱點(diǎn)的展示和交互,以便更好地呈現(xiàn)數(shù)據(jù)和分析結(jié)果,本文將介紹在Vue中如何進(jìn)行地圖熱點(diǎn)展示與交互,包括熱力圖、點(diǎn)聚合等2023-07-07