Vue.js: définir un service
je suis nouveau à Vue. Je le vois comme une alternative à L'angle et je l'aime vraiment jusqu'à présent. Pour en avoir le sentiment, je recentre un projet angulaire existant sur un projet Vue. Maintenant je suis juste au point où j'ai besoin de communiquer avec mon API REST.
en angle j'avais l'habitude de définir un service pour cela, qui a été injecté dans chaque contrôleur dans le besoin. Vue ne connaît pas le service comme je le comprends. Comment cela peut-il être réalisé en Vue? Jusqu'à présent, j' ne pouvais pas trouver une bonne approche pour ce.
vue-ressource est seulement pour http fonctionnalités que je comprends. Comme j'utilise jQuery aussi, c'est obsolète.
exemple:
j'ai vueComponent1 et vueComponent2 . Tous deux doivent avoir accès à la même ressource de repos. Pour gérer cela, je veux un service central, que les deux composants peuvent utiliser pour les requêtes à la ressource REST. Angulaire a le "service", qui fait exactement cela. Vue Non.
4 réponses
de L'Evi.js documentation.
Vue.js lui-même n'est pas un véritable cadre: il est axé sur la couche vue.
comme une bibliothèque se concentrant sur le V de MVC il ne fournit pas des choses comme des services.
utilisez-vous une sorte de chargeur de module comme Browserify ou Webpack?
Ensuite, vous pouvez utiliser le système de modules de ES6 pour créer un service tout en m'.
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() {
// Use vue-resource or any other http library to send your request
}
}
dans votre vue component 1 et 2 Vous pouvez utiliser ce service en important la classe.
import RestResource from './services/RestResource';
const restResourceService = new RestResource();
restResourceService.sendRequest();
de L'Evi.js documentation sur la Construction à Grande Échelle des Applications .
la communauté a contribué le vue-ressource plugin, qui fournit un moyen facile de travailler avec des API reposantes. Vous pouvez également utiliser N'importe quelle bibliothèque Ajax que vous aimez, par exemple $.ajax ou SuperAgent .
Vue ne nécessite pas de suivre une architecture spécifique, car il se réfère uniquement à la couche de vue dans une architecture MVC ou MVVM. Comme @Marc déjà dit dans sa réponse , une bonne pratique est d'utiliser un chargeur de module comme Browserify ou Webpack afin que vous puissiez créer vos "services" dans des fichiers séparés, en Les important où vous avez besoin. Il est très facile de structurer votre application avec un chargeur de modules en utilisant vue-cli .
en effet, j'aime vraiment personnellement le Flux architecture pour les applications basées sur des composants, alors je vous recommande de jeter un oeil à Vuex , une architecture D'application inspirée de Flux qui est conçu spécifiquement pour la gestion de l'État à l'intérieur de Vue.js apps.
de cette façon, vous pouvez créer des Actions qui utilisent vue-ressource pour demander votre API, puis vous pouvez envoyer des Mutations lorsque les données arrivent, avec tous les composants qui ont besoin de ces données déjà liées à l'état global, en réagissant automatiquement. En d'autres termes, vos composants eux-mêmes n'ont pas besoin d'appeler les services, ils réagissent juste aux changements d'État envoyés par des Mutations.
vous avez de très bonnes réponses à cette question Quel est l'équivalent du Service angulaire en VueJS?
comme @Otabek Kholikov dit là-bas-vous avez 4 options:
- Apatrides service: ensuite, vous devez utiliser mixin
- service public: use Vuex
- service D'exportation et importation à partir d'un code vue
- tout objet global javascript
dans mes projets je préfère (4). Il me donne le maximum de flexibilité et n'a que les implémentations dont j'ai besoin (je n'apporte pas par exemple Vuex et ne devrait pas être strict avec ses règles et il n'y a pas de "magie" - tout le code est à moi). Vous avez un exemple de mise en œuvre dans le Question j'ai mentionné ci-dessus.
si vous n'utilisez pas de chargeur de module, vous pouvez définir un plugin personnalisé . Quelques exemples de code:
var myPlugin = {
install: function (Vue, options) {
//private
var myPrivateProperty = 'Private property';
//instance properties and methods
Vue.prototype.$myPublicProperty = 'Public Property';
Vue.prototype.$myAddedMethod = function () {
return myPrivateProperty;
};
Vue.prototype._getData = function (url) {
return url;
};
//static properties and methods
Vue.myStaticProperty = 'My static prop';
Vue.myStaticMethod = function () {
console.log('in');
}
}
};
Vue.use(myPlugin);
new Vue({
el: '#app',
created: function () {
//using instance
console.log(this.$myAddedMethod());
console.log('my get data: ' + this._getData('some url'));
console.log(this.$myPublicProperty);
//using static
console.log(Vue.myStaticProperty);
Vue.myStaticMethod();
}
});
vous pouvez aussi brancher d'autres bibliothèques, ce post montre comment brancher axios.js