Vue應用程式中實現AJAX的四個地方-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue應用程式中實現AJAX的四個地方

PHPz

Sep 25, 2020 pm 04:07 PM

ajaxvue.js

Vue應用程式中實現AJAX的四個地方

Vue沒有提供實作AJAX的正式方法，而且有許多不同的設計模式可以有效地使用。每種方法都有其優缺點，應該根據需求來判斷。您甚至可以同時使用多個!

在本文中，我將向您展示在Vue應用程式中實作AJAX的四個地方:

根實例
元件
Vuex行動
路線導航警衛

#我將解釋每種方法，給出一個例子，並討論其優缺點。

1、根實例

#使用這個體系結構，您可以從根實例發出所有AJAX請求，並將所有狀態儲存在根實例中。如果任何子組件需要數據，它將作為輔助。如果子元件需要刷新數據，將使用自訂事件提示根實例請求它。

new Vue({
  data: {
    message: &#39;&#39;
  },
  methods: {
    refreshMessage(resource) {
      this.$http.get(&#39;/message&#39;).then((response) {
        this.message = response.data.message;
      });
    }
  }
})

Vue.component(&#39;sub-component&#39;, {
  template: &#39;<div>{{ message }}</div>&#39;,
  props: [ &#39;message&#39; ]
  methods: {
    refreshMessage() {
      this.$emit(&#39;refreshMessage&#39;);
    }
  }
});

優點：

缺點：

#隨著應用程式的擴展，需要大量的道具和自訂事件。

2、元件

#使用這個體系結構，元件負責獨立管理它們自己的AJAX請求和狀態。在實踐中，您可能想要建立幾個「容器」元件，這些元件為它們自己的本機「表示」元件群組管理資料。

例如，filter-list可能是包裝filter-input和filter-reset的容器元件，它們充當表示元件。 filter-list將包含AJAX邏輯，並將管理該群組中所有元件的數據，透過道具和事件進行通訊。

let mixin = {
  methods: {
    callAJAX(resource) {
      ...
    }
  }
}

Vue.component(&#39;container-comp&#39;, {
  // No meaningful template, I just manage data for my children
  template: &#39;<div><presentation-comp :mydata="mydata"></presentation-comp></div>&#39;, 
  mixins: [ myMixin ],
  data() {
    return { ... }
  },

})

Vue.component(&#39;presentation-comp&#39;, {
  template: <div>I just show stuff like {{ mydata }}</div>,
  props: [ &#39;mydata&#39; ]
})

優點：

保持元件分離和可重複使用。

取得所需資料的時間和地點。
缺點：

#不容易與其他元件或元件群組通訊資料。

元件可能會有太多的職責和重複的功能。

3、Vuex行動

#使用這個體系結構，您可以在Vuex儲存中管理狀態邏輯和AJAX邏輯。元件可以透過分派操作請求新資料。

如果您實作了這種模式，那麼最好在操作中傳回一個promise，這樣您就可以對AJAX請求的解析做出回應，例如隱藏載入微調器、重新啟用按鈕等。

store = new Vuex.Store({
  state: {
    message: &#39;&#39;
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload
    }
  },
  actions: {
    refreshMessage(context) {
      return new Promise((resolve) => {
        this.$http.get(&#39;...&#39;).then((response) => {
          context.commit(&#39;updateMessage&#39;, response.data.message);
          resolve();
        });
      });
    }
  }
});

Vue.component(&#39;my-component&#39;, {
  template: &#39;<div>{{ message }}</div>&#39;,
  methods: {
    refreshMessage() {
      this.$store.dispatch(&#39;refeshMessage&#39;).then(() => {
        // do stuff
      });
    }
  },
  computed: {
    message: { return this.$store.state.message; }
  }
});

我喜歡這種架構，因為它很好地解耦了狀態和表示邏輯。如果你正在使用Vuex，這是一個方法。如果你不使用Vuex，這可能是個夠好的理由。

#優點：

缺點：

#增加了Vuex的開銷

4、路線導航警衛

######使用這種架構，您的應用程式將被分割為多個頁面，當路由更改時，將取得頁面及其子元件所需的所有資料。 ###########################這個方法的主要優點是它確實簡化了UI。如果元件獨立地取得它們自己的數據，當元件資料以任意順序填充時，頁面將不可預測地重新呈現。 ######

实现此功能的一个简单方法是在服务器上为每个页面创建端点，例如/about、/contact等，这些端点与应用程序中的路由名匹配。然后，可以实现一个通用的beforeRouteEnter钩子，将所有数据属性合并到页面组件的数据中:

import axios from &#39;axios&#39;;

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__ = &#39;{ "data": [ ... ] }&#39;;
  </script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

然后，AJAX可以更恰当地用于后续数据获取。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上是Vue應用程式中實現AJAX的四個地方的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：vuejsdevelopers。如有侵權，請聯絡admin@php.cn刪除

Netflix：探索React（或其他框架）的使用Apr 23, 2025 am 12:02 AM

Netflix選擇React來構建其用戶界面，因為React的組件化設計和虛擬DOM機制能夠高效處理複雜界面和頻繁更新。 1）組件化設計讓Netflix將界面分解成可管理的小組件，提高了開發效率和代碼可維護性。 2）虛擬DOM機制通過最小化DOM操作，確保了Netflix用戶界面的流暢性和高性能。

vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被開發者喜愛因為它易於上手且功能強大。 1)其響應式數據綁定係統自動更新視圖。 2)組件系統提高了代碼的可重用性和可維護性。 3)計算屬性和偵聽器增強了代碼的可讀性和性能。 4)使用VueDevtools和檢查控制台錯誤是常見的調試技巧。 5)性能優化包括使用key屬性、計算屬性和keep-alive組件。 6)最佳實踐包括清晰的組件命名、使用單文件組件和合理使用生命週期鉤子。

vue.js在前端的力量：關鍵特徵和好處Apr 21, 2025 am 12:07 AM

Vue.js是一個漸進式的JavaScript框架，適用於構建高效、可維護的前端應用。其關鍵特性包括：1.響應式數據綁定，2.組件化開發，3.虛擬DOM。通過這些特性，Vue.js簡化了開發過程，提高了應用性能和可維護性，使其在現代Web開發中備受歡迎。

vue.js比反應好嗎？Apr 20, 2025 am 12:05 AM

Vue.js和React各有優劣，選擇取決於項目需求和團隊情況。 1)Vue.js適合小型項目和初學者，因其簡潔和易上手；2)React適用於大型項目和復雜UI，因其豐富的生態系統和組件化設計。

vue.js的功能：增強前端的用戶體驗Apr 19, 2025 am 12:13 AM

Vue.js通過多種功能提升用戶體驗：1.響應式系統實現數據即時反饋；2.組件化開發提高代碼復用性；3.VueRouter提供平滑導航；4.動態數據綁定和過渡動畫增強交互效果；5.錯誤處理機制確保用戶反饋；6.性能優化和最佳實踐提升應用性能。

vue.js：定義其在網絡開發中的作用Apr 18, 2025 am 12:07 AM

Vue.js在Web開發中的角色是作為一個漸進式JavaScript框架，簡化開發過程並提高效率。 1)它通過響應式數據綁定和組件化開發，使開發者能專注於業務邏輯。 2)Vue.js的工作原理依賴於響應式系統和虛擬DOM，優化性能。 3)實際項目中，使用Vuex管理全局狀態和優化數據響應性是常見實踐。