首頁 >web前端 >Vue.js >Vue應用程式中實現AJAX的四個地方

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

PHPz轉載: 2020-09-25 16:07:032579瀏覽

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.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：Vue.js中定義元件範本的幾種方法介紹下一篇：Vue.js中定義元件範本的幾種方法介紹

看更多