Vier Orte zur Implementierung von AJAX in Vue-Anwendungen

Vue bietet keine formale Möglichkeit, AJAX zu implementieren, und es gibt viele verschiedene Designmuster, die effektiv genutzt werden können. Jede Methode hat ihre Vor- und Nachteile und sollte anhand Ihrer Bedürfnisse beurteilt werden. Sie können sogar mehrere gleichzeitig verwenden!

In diesem Artikel zeige ich Ihnen vier Stellen, an denen Sie AJAX in Ihrer Vue-Anwendung implementieren können:

• Root Instance

• Component

• Vuex Action

• Route Navigation Guard

Ich werde jede Methode erklären, ein Beispiel geben und ihre Vor- und Nachteile diskutieren.

1. Root-Instanz

Mit dieser Architektur können Sie alle AJAX-Anfragen von der Root-Instanz aus stellen und den gesamten Status in der Root-Instanz speichern. Es fungiert als Helfer, wenn eine untergeordnete Komponente Daten benötigt. Wenn eine untergeordnete Komponente Daten aktualisieren muss, wird die Root-Instanz aufgefordert, dies mithilfe eines benutzerdefinierten Ereignisses anzufordern.

Beispiel:

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

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

Vorteile:

• Alle AJAX-Logik und -Daten in einem Ort.

• Halten Sie Komponenten „dumm“, damit sie sich auf die Präsentation konzentrieren können.

Nachteile:

• Da die Anwendung erweitert wird, sind viele Requisiten und benutzerdefinierte Ereignisse erforderlich.

2. Komponenten

Bei dieser Architektur sind Komponenten dafür verantwortlich, ihre eigenen AJAX-Anfragen und ihren Status unabhängig zu verwalten. In der Praxis möchten Sie möglicherweise mehrere „Container“-Komponenten erstellen, die Daten für ihre eigenen lokalen „Präsentations“-Komponentengruppen verwalten.

Filterliste könnte beispielsweise eine Containerkomponente sein, die filter-input und filter-reset umschließt, die als Präsentationskomponenten fungieren. Die Filterliste enthält die AJAX-Logik und verwaltet die Daten für alle Komponenten in der Gruppe, die über Requisiten und Ereignisse kommunizieren.

Um die Implementierung dieser Architektur zu vereinfachen, können Sie jede AJAX-Logik in ein Mixin abstrahieren und dann das Mixin in der Komponente verwenden, um sie AJAX-fähig zu machen.

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

Vue.component('container-comp', {
  // 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; ]
})

Vorteile:

• Halten Sie die Komponenten getrennt und wiederverwendbar.

• Holen Sie sich die Daten, die Sie brauchen, wann und wo.

Nachteile:

• Es ist nicht einfach, Daten mit anderen Komponenten oder Komponentengruppen zu kommunizieren.
  

• Komponenten können zu viele Verantwortlichkeiten haben und Funktionen duplizieren.

3. Vuex in Aktion

Mit dieser Architektur können Sie Stateful-Logik und AJAX-Logik im Vuex-Speicher verwalten. Komponenten können durch Versandvorgänge neue Daten anfordern.

Wenn Sie dieses Muster implementieren, ist es besser, ein Versprechen in der Aktion zurückzugeben, damit Sie auf die Lösung der AJAX-Anfrage reagieren können, z. B. das Ausblenden des Ladespinners oder das erneute Aktivieren der Schaltfläche , usw. .

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: &#39;<div>{{ message }}</div>&#39;,
  methods: {
    refreshMessage() {
      this.$store.dispatch(&#39;refeshMessage&#39;).then(() => {
        // do stuff
      });
    }
  },
  computed: {
    message: { return this.$store.state.message; }
  }
});

Ich mag diese Architektur, weil sie Zustands- und Präsentationslogik sehr gut entkoppelt. Wenn Sie Vuex verwenden, finden Sie hier eine Möglichkeit. Wenn Sie Vuex nicht verwenden, ist dies wahrscheinlich ein guter Grund.

Vorteile:

• Alle Vorteile der Root-Komponentenarchitektur, ohne dass Requisiten und benutzerdefinierte Ereignisse erforderlich sind.

Nachteile:

• Erhöhter Vuex-Overhead

4. Route Navigation Guard

Bei dieser Architektur wird Ihre Anwendung in mehrere Seiten aufgeteilt , wenn sich die Route ändert, erhält alle für die Seite und ihre Unterkomponenten erforderlichen Daten.

Der Hauptvorteil dieses Ansatzes besteht darin, dass er die Benutzeroberfläche wirklich vereinfacht. Wenn Komponenten ihre eigenen Daten unabhängig voneinander beziehen, wird die Seite unvorhersehbar neu gerendert, wenn Komponentendaten in einer willkürlichen Reihenfolge aufgefüllt werden.

实现此功能的一个简单方法是在服务器上为每个页面创建端点，例如/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页面头部的内联脚本中，以便在需要时将其作为全局变量提供给应用程序。

<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视频教程精选

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

Das obige ist der detaillierte Inhalt vonVier Orte zur Implementierung von AJAX in Vue-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!