Vue.js應用的四種AJAX請求數據模式

iKcamp 發布于2019-08-20 19:00 / 1669人閱讀

摘要：應用的四種請求數據模式翻譯原文出處鄙人翻譯略差，別見笑。每個都有自己的利弊，應根據要求進行判斷。二組件在使用框架時，組件負責管理自己的請求和獨立狀態。相反，將初始應用程序狀態注入頁面的內聯腳本中，以便應用程序作為全局變量在需要時可用。

Vue.js應用的四種AJAX請求數據模式

翻譯原文出處：4 AJAX Patterns For Vue.js Apps
鄙人翻譯略差，別見笑。

如果您閑的沒事干去兩個Vue.js開發人員：“在Vue應用中使用AJAX的正確姿勢是咋樣的？”，您將會得到三種或更多的不同回答。

Vue.js官方沒有提供實現AJAX的指定方式，并且有許多不同的設計模式可以被有效地使用。每個都有自己的利弊，應根據要求進行判斷。你甚至可以同時使用幾個！

在本文中，我將向您展示您可以在Vue應用程序中實現AJAX的四個位置：

1、根實例
2、組件Components
3、Vuex actions
4、路線導航衛士
5、另加：獎金模式

我將解釋每個方法，舉一個例子，并涵蓋利弊。

一、根實例

在使用Vue框架時，您可以一開始就從根實例發出所有AJAX請求，即寫好所有的數據請求，并將所有狀態存儲在該實例中。如果任何子組件需要數據，它將會順著props中傳下來。如果子組件需要刷新數據，則將使用自定義事件來提示根實例請求它。

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");
    }
  }
});

優點

將所有的AJAX邏輯和數據保存在一個地方。

保持您的組件“獨立性”，以便它們可以更加專注于展示。

缺點

隨著您的應用擴展，需要書寫大量的“props”和自定義事件。

二、組件Components

在使用Vue框架時，組件負責管理自己的AJAX請求和獨立狀態。實際上，您可能需要創建幾個“容器組件”來管理本地組“展示組件”的數據。

例如，filter-list可能是一個容器組件包裝filter-input和filter-reset，它們作為展示組件。filter-list將包含AJAX數據邏輯，并且將管理該組中所有組件的數據，通過props和事件進行通信。

請參閱譯文《容器組件和展示組件》原作者：Dan Abramov，可以更好地深入了解這種模式。

為了簡化此架構的實現，您可以將任何AJAX邏輯抽象為混合，然后在組件中使用mixin使其成為AJAX。

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

Vue.component("container-comp", {
  // No meaningful template, I just manage data for my children
  template: "", 
  mixins: [ myMixin ],
  data() {
    return {
     //... 
    }
  },

});

Vue.component("presentation-comp", {
  template: "I just show stuff like {{ mydata }}",
  props: [ "mydata" ]
});

優點

保持組件脫鉤和可重用。

在任何時候和任何地點都可以獲取數據。

缺點

與其他組件或組件組不通信數據。

組件可能會產生很多累贅的職責和重復的功能。

三、Vuex actions

在使用Vue框架時，您可以在Vuex store中管理狀態和AJAX邏輯; 組件可以通過dispatch方法操作來請求新數據(store.dispatch將用于觸發actions動作)。

如果您要使用此模式，最好從您的action中返回一個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: "{{ message }}",
  methods: {
    refreshMessage() {
      this.$store.dispatch("refeshMessage").then(() => {
        // do stuff
      });
    }
  },
  computed: {
    message: { return this.$store.state.message; }
  }
});

本人比較喜歡這種數據請求模式，因為它很好地分離了你的狀態和表現的邏輯。如果你正在使用Vuex，這是要走的路。如果你不使用Vuex，這模式可能是一個很好的理由。

優點

所有的根組件架構的優點，不需要props 和自定義事件。

缺點

增加Vuex的開銷。

四、路線導航衛士

在使用Vue框架時，您的應用程序分為多個頁面，當路由更變時，將抓取頁面及其子組件所需的所有數據。

這種方法的主要優點是它真正簡化了您的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頁面的內聯腳本中，以便應用程序作為全局變量在需要時可用。


...

  ...

然后，AJAX可以更適合地用于后續數據提取。

如果您有興趣了解有關此架構的更多信息，請參閱作者的文章“避免此全面堆棧Vue / Laravel應用程序中的常見反模式”。

本文原地址：https://github.com/itemsets/v...

云服務器 GPU云服務器數據遷移的四種方法對數據倉庫分析的四種方式 activity的四種狀態 java中線程的四種狀態

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85010.html

javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯系作者獲得授權。達到無刷新的效果。對象的狀態不受外界影響。對象代表一個異步操作，有三種狀態進行中已完成，又稱和已失敗。以下問題解釋非本人原創，是根據面試經驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發生了什么計算機...

linkFly 2019-08-21 11:35 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯系作者獲得授權。達到無刷新的效果。對象的狀態不受外界影響。對象代表一個異步操作，有三種狀態進行中已完成，又稱和已失敗。以下問題解釋非本人原創，是根據面試經驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發生了什么計算機...

Nosee 2019-08-30 15:53 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯系作者獲得授權。達到無刷新的效果。對象的狀態不受外界影響。對象代表一個異步操作，有三種狀態進行中已完成，又稱和已失敗。以下問題解釋非本人原創，是根據面試經驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發生了什么計算機...

劉東 2019-08-01 16:29 評論0 收藏0
Promise異步函數順序執行的四種方法

摘要：前幾天遇到一個編程題，要求控制順序執行，今天總結了一下這個至少有好四種方法都可以實現，包括嵌套，通過一個串起來，，實現，以下逐一介紹。前幾天遇到一個編程題，要求控制promise順序執行，今天總結了一下這個至少有好四種方法都可以實現，包括promise嵌套，通過一個promise串起來，generator，async實現，以下逐一介紹。原題目如下： //實現mergePromise函...

Awbeci 2019-08-23 11:28 評論0 收藏0