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

首頁

web前端

Vue.js

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

PHPz

Sep 25, 2020 pm 04:07 PM

ajax vue.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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7843

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資

PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤

如何解決jQuery AJAX報錯403的問題？ Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使

如何使用Ajax從PHP方法取得變數？ Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：

PHP 與 Ajax：建立動態載入內容的解決方案 Jun 06, 2024 pm 01:12 PM

Ajax（非同步JavaScript和XML）允許在不重新載入頁面情況下新增動態內容。使用PHP和Ajax，您可以動態載入產品清單：HTML建立一個帶有容器元素的頁面，Ajax請求載入資料後將資料加入到該元素中。 JavaScript使用Ajax透過XMLHttpRequest向伺服器傳送請求，從伺服器取得JSON格式的產品資料。 PHP使用MySQL從資料庫查詢產品數據，並將其編碼為JSON格式。 JavaScript解析JSON數據，並將其顯示在頁面容器中。點選按鈕觸發Ajax請求，載入產品清單。

PHP 與 Ajax：提升 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM

為了提升Ajax安全性，有幾種方法：CSRF保護：產生令牌並將其傳送到客戶端，在請求中新增至伺服器端進行驗證。 XSS保護：使用htmlspecialchars()過濾輸入，防止惡意腳本注入。 Content-Security-Policy頭：限制惡意資源加載，指定允許載入腳本和樣式表的來源。驗證伺服器端輸入：驗證從Ajax請求接收的輸入，防止攻擊者利用輸入漏洞。使用安全Ajax函式庫：利用jQuery等函式庫提供的自動CSRF保護模組。