Quatre endroits pour implémenter AJAX dans les applications Vue

Vue ne fournit aucun moyen formel d'implémenter AJAX, et il existe de nombreux modèles de conception différents qui peuvent être utilisés efficacement. Chaque méthode a ses avantages et ses inconvénients et doit être jugée en fonction de vos besoins. Vous pouvez même en utiliser plusieurs en même temps !

Dans cet article, je vais vous montrer quatre endroits pour implémenter AJAX dans votre application Vue :

• Instance racine

• Composants

• Actions Vuex

• Garde de navigation d'itinéraire

Je vais expliquer chaque méthode, donner un exemple et discuter de ses avantages et inconvénients.

1. Instance racine

En utilisant cette architecture, vous pouvez effectuer toutes les requêtes AJAX à partir de l'instance racine, et stocke tous les états dans l’instance racine. Il agira comme une aide si un composant enfant a besoin de données. Si un composant enfant doit actualiser les données, l'instance racine sera invitée à le demander à l'aide d'un événement personnalisé.

Exemple :

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

Avantages :

• Conservez toute la logique et les données AJAX au même endroit.

• Gardez les composants "stupides" afin qu'ils puissent se concentrer sur la présentation.

Inconvénients :

• À mesure que l'application se développe, un grand nombre d'accessoires et d'événements personnalisés sont nécessaires .

2. Composants

Grâce à cette architecture, les composants sont responsables d'une gestion indépendante Leur propres requêtes et statuts AJAX. En pratique, vous souhaiterez peut-être créer plusieurs composants « conteneurs » qui gèrent les données pour leurs propres groupes de composants « présentation » locaux.

Par exemple, filter-list peut être un composant de conteneur enveloppant l'entrée du filtre et la réinitialisation du filtre, qui agissent comme composants de présentation . La liste de filtres contiendra la logique AJAX et gérera les données de tous les composants du groupe, en communiquant via des accessoires et des événements.

Pour faciliter la mise en œuvre de cette architecture, vous pouvez extraire n'importe quelle logique AJAX dans un mixin, puis utiliser le mixin dans le composant pour le rendre compatible AJAX.

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

Avantages :

• Conserver les composants Découplé et réutilisable.

• Obtenez les données dont vous avez besoin quand et où.

Inconvénients :

• Pas facile de communiquer des données avec d'autres composants ou groupes de composants.
  

• Les composants peuvent avoir trop de responsabilités et des fonctionnalités en double.

3. Vuex en action

En utilisant cette architecture, vous pouvez utiliser Vuex Manage logique d'état et logique AJAX dans le stockage. Les composants peuvent demander de nouvelles données via des opérations de répartition.

Si vous implémentez ce modèle, c'est une bonne idée de renvoyer une promesse dans l'action afin de pouvoir analyser et répondre aux requêtes AJAX, telles que le masquage des spinners de chargement, la réactivation des boutons, etc.

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

J'aime cette architecture car elle découple bien la logique d'état et de présentation. Si vous utilisez Vuex, voici une façon de procéder. Si vous n'utilisez pas Vuex, c'est probablement une raison suffisante.

Avantages :

• Toute l'architecture des composants racine Avantages, aucun accessoire ou événement personnalisé requis.

Inconvénients :

• Augmentation des frais généraux de Vuex

4. Route Navigation Guard

En utilisant cette architecture, votre application sera divisée en plusieurs pages et, lorsque l'itinéraire change, obtiendra toutes les données. nécessaire pour la page et ses sous-composants.

Le principal avantage de cette approche est qu'elle simplifie vraiment l'interface utilisateur. Si les composants obtiennent leurs propres données indépendamment, la page sera restituée de manière imprévisible lorsque les données des composants sont renseignées dans un ordre arbitraire.

实现此功能的一个简单方法是在服务器上为每个页面创建端点，例如/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视频教程精选

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!