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');
}
}
});
缺點：
#隨著應用程式的擴展，需要大量的道具和自訂事件。
2、元件
#使用這個體系結構，元件負責獨立管理它們自己的AJAX請求和狀態。在實踐中，您可能想要建立幾個「容器」元件，這些元件為它們自己的本機「表示」元件群組管理資料。
例如，filter-list可能是包裝filter-input和filter-reset的容器元件，它們充當表示元件。 filter-list將包含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的開銷
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可以更恰当地用于后续数据获取。
相关推荐：
更多编程相关知识，请访问：编程入门！！
以上是Vue應用程式中實現AJAX的四個地方的詳細內容。更多資訊請關注PHP中文網其他相關文章！
