Vue應(yīng)用程序中如何實(shí)現(xiàn)AJAX-創(chuàng)新互聯(lián)

小編給大家分享一下Vue應(yīng)用程序中如何實(shí)現(xiàn)AJAX，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了定安免費(fèi)建站歡迎大家使用！

Vue沒(méi)有提供實(shí)現(xiàn)AJAX的正式方法，而且有許多不同的設(shè)計(jì)模式可以有效地使用。每種方法都有其優(yōu)缺點(diǎn)，應(yīng)該根據(jù)需求進(jìn)行判斷。您甚至可以同時(shí)使用多個(gè)!

在本文中，我將向您展示在Vue應(yīng)用程序中實(shí)現(xiàn)AJAX的四個(gè)地方:

根實(shí)例
組件
Vuex行動(dòng)
路線導(dǎo)航警衛(wèi)

我將解釋每種方法，給出一個(gè)例子，并討論其優(yōu)缺點(diǎn)。

1、根實(shí)例

使用這種體系結(jié)構(gòu)，您可以從根實(shí)例發(fā)出所有AJAX請(qǐng)求，并將所有狀態(tài)存儲(chǔ)在根實(shí)例中。如果任何子組件需要數(shù)據(jù)，它將作為輔助。如果子組件需要刷新數(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è)地方。
保持組件“dumb”，這樣它們就可以專注于表示。

缺點(diǎn)：

隨著應(yīng)用程序的擴(kuò)展，需要大量的道具和定制事件。

2、組件

使用這種體系結(jié)構(gòu)，組件負(fù)責(zé)獨(dú)立地管理它們自己的AJAX請(qǐng)求和狀態(tài)。在實(shí)踐中，您可能希望創(chuàng)建幾個(gè)“容器”組件，這些組件為它們自己的本地“表示”組件組管理數(shù)據(jù)。

例如，filter-list可能是包裝filter-input和filter-reset的容器組件，它們充當(dāng)表示組件。filter-list將包含AJAX邏輯，并將管理該組中所有組件的數(shù)據(jù)，通過(guò)道具和事件進(jìn)行通信。

為了使這個(gè)體系結(jié)構(gòu)的實(shí)現(xiàn)更容易，您可以將任何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' ]
})

優(yōu)點(diǎn)：

保持組件分離和可重用。
獲取所需數(shù)據(jù)的時(shí)間和地點(diǎn)。

缺點(diǎn)：

不容易與其他組件或組件組通信數(shù)據(jù)。
組件可能會(huì)有太多的職責(zé)和重復(fù)的功能。

3、Vuex行動(dòng)

使用這種體系結(jié)構(gòu)，您可以在Vuex存儲(chǔ)中管理狀態(tài)邏輯和AJAX邏輯。組件可以通過(guò)分派操作請(qǐng)求新數(shù)據(jù)。

如果您實(shí)現(xiàn)了這種模式，那么好在操作中返回一個(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; }
  }
});

我喜歡這種架構(gòu)，因?yàn)樗芎玫亟怦盍藸顟B(tài)和表示邏輯。如果你正在使用Vuex，這是一個(gè)方法。如果你不使用Vuex，這可能是一個(gè)足夠好的理由。

優(yōu)點(diǎn)：

根組件體系結(jié)構(gòu)的所有優(yōu)點(diǎn)，不需要道具和自定義事件。

缺點(diǎn)：

增加了Vuex的開(kāi)銷

4、路線導(dǎo)航警衛(wèi)

使用這種架構(gòu)，您的應(yīng)用程序?qū)⒈环指顬槎鄠€(gè)頁(yè)面，當(dāng)路由更改時(shí)，將獲取頁(yè)面及其子組件所需的所有數(shù)據(jù)。

這種方法的主要優(yōu)點(diǎn)是它確實(shí)簡(jiǎn)化了UI。如果組件獨(dú)立地獲取它們自己的數(shù)據(jù)，當(dāng)組件數(shù)據(jù)以任意順序填充時(shí)，頁(yè)面將不可預(yù)測(cè)地重新呈現(xiàn)。

實(shí)現(xiàn)此功能的一個(gè)簡(jiǎn)單方法是在服務(wù)器上為每個(gè)頁(yè)面創(chuàng)建端點(diǎn)，例如/about、/contact等，這些端點(diǎn)與應(yīng)用程序中的路由名匹配。然后，可以實(shí)現(xiàn)一個(gè)通用的beforeRouteEnter鉤子，將所有數(shù)據(jù)屬性合并到頁(yè)面組件的數(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)：

整體上比較慢，因?yàn)轫?yè)面在所有數(shù)據(jù)都準(zhǔn)備好之前無(wú)法呈現(xiàn)。
如果您不使用路由，也沒(méi)有多大幫助。

附加模式:服務(wù)器—在頁(yè)面中呈現(xiàn)第一個(gè)AJAX調(diào)用

不建議在初始頁(yè)面加載時(shí)使用AJAX檢索應(yīng)用程序狀態(tài)，因?yàn)樗枰~外的到服務(wù)器的往返，這會(huì)延遲應(yīng)用程序的呈現(xiàn)。

相反，將初始應(yīng)用程序狀態(tài)注入HTML頁(yè)面頭部的內(nèi)聯(lián)腳本中，以便在需要時(shí)將其作為全局變量提供給應(yīng)用程序。

<html>
...
<head>
  ...
  <script type="text/javascript">
   window.__INITIAL_STATE__ = '{ "data": [ ... ] }';
  </script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

然后，AJAX可以更恰當(dāng)?shù)赜糜诤罄m(xù)數(shù)據(jù)獲取。

以上是“Vue應(yīng)用程序中如何實(shí)現(xiàn)AJAX”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：Vue應(yīng)用程序中如何實(shí)現(xiàn)AJAX-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://bm7419.com/article48/diohep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站排名、App設(shè)計(jì)、ChatGPT、企業(yè)網(wǎng)站制作、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容