資訊專欄INFORMATION COLUMN
摘要：應(yīng)用的四種請(qǐng)求數(shù)據(jù)模式翻譯原文出處鄙人翻譯略差，別見笑。每個(gè)都有自己的利弊，應(yīng)根據(jù)要求進(jìn)行判斷。二組件在使用框架時(shí)，組件負(fù)責(zé)管理自己的請(qǐng)求和獨(dú)立狀態(tài)。相反，將初始應(yīng)用程序狀態(tài)注入頁面的內(nèi)聯(lián)腳本中，以便應(yīng)用程序作為全局變量在需要時(shí)可用。
Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式
翻譯原文出處：4 AJAX Patterns For Vue.js Apps
鄙人翻譯略差，別見笑。
如果您閑的沒事干去兩個(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: "{{ message }}",
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)行通信。
請(qǐng)參閱譯文《容器組件和展示組件》原作者：Dan Abramov，可以更好地深入了解這種模式。
為了簡(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: "
優(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: "{{ message }}",
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í)可用。
... ...
然后，AJAX可以更適合地用于后續(xù)數(shù)據(jù)提取。
如果您有興趣了解有關(guān)此架構(gòu)的更多信息，請(qǐng)參閱作者的文章“避免此全面堆棧Vue / Laravel應(yīng)用程序中的常見反模式”。
本文原地址：https://github.com/itemsets/v...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85010.html
摘要：跨域請(qǐng)求詳解從繁至簡(jiǎn)前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。 jsonp 跨域請(qǐng)求詳解——從繁至簡(jiǎn) - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題...
摘要：通過管理組件通信通過驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁鏈接來源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱和已失敗。 以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過程 從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么 計(jì)算機(jī)...
摘要：通過管理組件通信通過驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁鏈接來源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱和已失敗。 以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過程 從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么 計(jì)算機(jī)...
摘要：通過管理組件通信通過驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁鏈接來源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱和已失敗。 以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過程 從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么 計(jì)算機(jī)...
摘要：前幾天遇到一個(gè)編程題，要求控制順序執(zhí)行，今天總結(jié)了一下這個(gè)至少有好四種方法都可以實(shí)現(xiàn)，包括嵌套，通過一個(gè)串起來，，實(shí)現(xiàn)，以下逐一介紹。 前幾天遇到一個(gè)編程題，要求控制promise順序執(zhí)行，今天總結(jié)了一下這個(gè)至少有好四種方法都可以實(shí)現(xiàn)，包括promise嵌套，通過一個(gè)promise串起來，generator，async實(shí)現(xiàn)，以下逐一介紹。原題目如下： //實(shí)現(xiàn)mergePromise函...
閱讀 973·2023-04-26 02:49
閱讀 1185·2021-11-25 09:43
閱讀 2553·2021-11-18 10:02
閱讀 2930·2021-10-18 13:32
閱讀 1291·2019-08-30 13:54
閱讀 2088·2019-08-30 12:58
閱讀 3020·2019-08-29 14:06
閱讀 2161·2019-08-28 18:10
