Vue.js : définir un service

Question

Je regarde Vue.js comme une alternative à Angular et je l'aime vraiment jusqu'à présent. Pour me familiariser avec cela, je suis en train de refondre un projet Angular existant en un projet Vue. Je suis juste au point où j'ai besoin de communiquer avec mon API REST.

En Angular, je devais définir un service pour cela, qui était injecté dans chaque contrôleur qui en avait besoin. Il semble que Vue ne connaisse pas le concept de "service" tel que je le comprends. Comment peut-on y parvenir en Vue?

J'ai considéré vue-resource, mais il ne concerne que les fonctionnalités http autant que je comprends. Comme j'utilise également jQuery, cela est obsolète.

Exemple:

J'ai vueComponent1 et vueComponent2. Tous deux ont besoin d'accéder à la même ressource REST. Pour gérer cela, je veux un service central, que les deux composants peuvent utiliser pour des requêtes à la ressource REST. Angular a le composant 'service', qui fait exactement cela. Vue ne l'a pas.

Answer 1

De la documentation de Vue.js.

Vue.js lui-même n'est pas un framework complet - il se concentre uniquement sur la couche de vue.

En tant que bibliothèque se concentrant sur la V de MVC, elle ne fournit pas des choses comme des services.

Utilisez-vous un type de chargeur de module comme Browserify ou Webpack?
Alors vous pouvez tirer parti du système de module ES6 pour créer un service par vous-même.
Tout ce que vous avez à faire est de créer une classe JavaScript simple qui est exportée par ce nouveau module.

Un exemple pourrait ressembler à ceci:

export default class RestResource {

  sendRequest() {
    // Utilisez vue-resource ou toute autre bibliothèque http pour envoyer votre requête
  }

}

À l'intérieur de votre composant vue 1 et 2, vous pouvez utiliser ce service en important la classe.

import RestResource from './services/RestResource';

const restResourceService = new RestResource();

restResourceService.sendRequest();

Answer 2

De la documentation de Vue.js sur Construction d'applications à grande échelle.

La communauté a contribué le plugin vue-resource, qui fournit un moyen facile de travailler avec des API RESTful. Vous pouvez également utiliser n'importe quelle bibliothèque Ajax que vous aimez, par exemple $.ajax ou SuperAgent.

Vue ne vous oblige pas à suivre une architecture spécifique, car elle se réfère uniquement à la couche Vue dans une architecture MVC ou MVVM. Comme @Marc l'a déjà dit dans sa réponse, une bonne pratique est d'utiliser un chargeur de modules comme Browserify ou Webpack afin de pouvoir créer vos "services" dans des fichiers séparés, les important là où vous en avez besoin. Il est très facile de structurer votre application avec un chargeur de modules en utilisant vue-cli.

En effet, j'aime particulièrement l'architecture Flux pour les applications basées sur les composants, donc je vous recommande de jeter un coup d'œil à Vuex, une architecture d'application inspirée de Flux conçue spécifiquement pour gérer l'état à l'intérieur des applications Vue.js.

De cette manière, vous pouvez créer des Actions qui utilisent vue-resource pour demander vos API, puis vous pouvez dispatcher des Mutations lorsque les données arrivent, avec tous les composants qui ont besoin de ces données déjà liés à l'État global, réagissant automatiquement. En d'autres termes, vos composants eux-mêmes n'ont pas besoin d'appeler les services, ils réagissent simplement aux changements d'état envoyés par les Mutations.

Answer 3

Vous avez de très bonnes réponses à ce sujet dans cette question Quel est l'équivalent du service Angular dans VueJS?

Comme le dit @Otabek Kholikov là-bas - vous avez 4 options:

1. Service sans état: alors vous devriez utiliser des mixins
2. Service avec état: utilisez Vuex
3. Exporter le service et l'importer depuis un code vue
4. tout objet global javascript

Dans mes projets, je préfère (4). Cela me donne la flexibilité maximale et n'a que les implémentations dont j'ai besoin (je n'apporte par exemple pas Vuex et ne devrait pas être strict à ses règles et il n'y a pas de "magie" - tout le code est le mien). Vous avez un exemple d'implémentation dans la question que j'ai mentionnée ci-dessus.

Answer 4

Si vous n'utilisez pas un chargeur de modules, vous pouvez définir un plugin personnalisé. Voici un exemple de code :

var myPlugin = {
        install: function (Vue, options) {
            //private
            var myPrivateProperty = 'Propriété privée';

            //propriétés et méthodes de l'instance
            Vue.prototype.$myPublicProperty = 'Propriété publique';

            Vue.prototype.$myAddedMethod = function () {
                return myPrivateProperty;
            };
            Vue.prototype._getData = function (url) {
                return url;
            };

            //propriétés et méthodes statiques
            Vue.myStaticProperty = 'Ma propriété statique';
            Vue.myStaticMethod = function () {
                console.log('in');
            }
        }
    };

    Vue.use(myPlugin);

    new Vue({
        el: '#app',
        created: function () {
            //utiliser l'instance
            console.log(this.$myAddedMethod());
            console.log('mes données: ' + this._getData('url quelconque'));
            console.log(this.$myPublicProperty);

            //utiliser le statique
            console.log(Vue.myStaticProperty);
            Vue.myStaticMethod();
        }
    });

Vous pouvez également intégrer d'autres bibliothèques, cet article montre comment intégrer axios.js

Answer 5

Vous pouvez configurer vue resource globalement comme

Vue.http.options.root = "votre url de base"

et maintenant, à chaque appel http, vous pouvez simplement appeler par le nom de la ressource -

this.$http.get('');
this.$http.get('utilisateurs')