Il semble très gênant d'essayer de respecter les bizarreries de Vuex d'appeler des méthodes avec des chaînes littérales pour les services alors que vous pourriez créer une classe TypeScript / JS qui contient l'état et la logique pour cela? Comment pouvez-vous utiliser une classe avec état en tant que service dans Vue?
Douglas Gaskell
37
J'utilise axios comme client HTTP pour passer des appels api, j'ai créé un gatewaysdossier dans mon srcdossier et j'ai mis des fichiers pour chaque backend, créant des instances axios , comme suit
Comme je suppose que vous souhaitez réutiliser cette méthode dans plusieurs composants, vous pouvez utiliser des mixins de vue.js:
Les mixins sont un moyen flexible de distribuer des fonctionnalités réutilisables pour les composants Vue. Un objet mixin peut contenir toutes les options de composant. Lorsqu'un composant utilise un mixin, toutes les options du mixin seront «mélangées» dans les propres options du composant.
Vous pouvez donc ajouter une méthode dans mixin et elle sera disponible dans tous les composants, où mixin sera mélangé. Voir l'exemple suivant:
// define a mixin object
var myMixin = {
methods: {
getProducts () {
myApi.get('products?id=' + prodId).then(response => this.product = response.data)
}
}
}
// define a component that uses this mixin
var Component = Vue.extend({
mixins: [myMixin]
})
// alternate way to have a mixin while initialising
new Vue({
mixins: [myMixin],
created: function () {
console.log('other code')
}
})
comment allez-vous mettre à jour X-Auth-Token de myApi.js lorsque l'utilisateur se connectera
Amarjit Singh
3
généralement ce n'est pas une valeur statique
Amarjit Singh
30
J'utilise principalement Vue Resource.
1.Je crée un nouveau fichier où je me connecte au point de terminaison de l'API en utilisant Vue.http.xxx.Donc disons que nous avons un point de terminaison qui génère les messages.Créez un nouveau répertoire dans votre projet, je l'appelle services, puis créez le fichier appelé PostsService.js- le contenu ressemble à ceci:
Selon Evan You, Vue-Resource prendra sa retraite et recommande Axios à la place. Lire son article J'aime beaucoup votre approche qui ressemble plus à angulaire 2
codely
@noypee VueResource fonctionne toujours, mais peu importe ce que vous voulez, ce serait exactement la même approche avec Axios.
Belmin Bedak
1
Oui, Vue2 continuera à accueillir vue-resource également selon son article
codely
2
C'est très sympa mais comment tester un tel composant avec mock-PostsService?
Shrike
@noypee, vue-resource n'est pas en train d'être retiré - Evan a déclaré qu'il "le retirait simplement du statut de recommandation officielle" . Il a en outre précisé pourquoi son équipe avait conclu qu'il n'y avait plus besoin d'une bibliothèque officielle AJAX. L'article lié l'explique bien. Et il convient de noter que vue-resource est toujours activement maintenu et une option parfaitement viable.
squidbe
8
Je suggère de créer un fournisseur d'API auquel vous pouvez accéder de n'importe où dans votre application.
Créez simplement un src/utilsdossier et à l'intérieur de celui-ci un fichier appeléapi.js .
Dans celui-ci, exportez votre wrapper qui sait comment communiquer avec votre API en tant qu'objet ou classe statique ES6 (je préfère à quoi cette dernière ressemble et fonctionne si vous n'avez pas peur des classes). Ce fournisseur peut utiliser n'importe quelle bibliothèque de requêtes HTTP que vous aimez et vous pouvez facilement l'échanger plus tard en modifiant un seul fichier (celui-ci) au lieu de rechercher toute la base de code. Voici un exemple d'utilisation d'axios, en supposant que nous ayons une API REST disponible à api.example.com/v1qui utilise SSL:
import axios from 'axios'
import { isProduction, env } from '@/utils/env'
const http = null // not possible to create a private property in JavaScript, so we move it outside of the class, so that it's only accessible within this module
class APIProvider {
constructor ({ url }) {
http = axios.create({
baseURL: url,
headers: { 'Content-Type': 'application/json' }
})
}
login (token) {
http.defaults.headers.common.Authorization = `Bearer ${token}`
}
logout () {
http.defaults.headers.common.Authorization = ''
}
// REST Methods
find ({ resource, query }) {
return http.get(resource, {
params: query
})
}
get ({ resource, id, query }) {
return http.get(`${resource}/${id}`, {
params: query
})
}
create ({ resource, data, query }) {
return http.post(resource, data, {
params: query
})
}
update ({ resource, id, data, query }) {
return http.patch(`${resource}/${id}`, data, {
params: query
})
}
destroy ({ resource, id }) {
return http.delete(`${resource}/${id}`)
}
}
export default new APIProvider({
url: env('API_URL') // We assume 'https://api.example.com/v1' is set as the env variable
})
Ensuite, dans votre main.jsfichier ou partout où vous démarrez l'application Vue, procédez comme suit:
import api from '@/src/utils/api'
Vue.$api = api
Object.defineProperty(Vue.prototype, '$api', {
get () {
return api
}
})
Vous pouvez maintenant y accéder n'importe où dans votre application Vue ainsi que partout où vous importez Vue elle-même:
Je pense que pour votre question simple, la réponse pourrait être n'importe quel module ES6 contenant des fonctions (équivalentes aux méthodes de classe dans ANgular) et les importer directement dans des composants à l'aide d'importations et d'exportations ES6. Il n'y a pas de tels services qui pourraient être injectés dans les composants.
Vous pouvez créer votre propre service où vous pouvez passer tous vos appels de serveur HTTP, puis les importer dans les composants où vous souhaitez les utiliser.
Le mieux est d'utiliser Vuex pour des applications de gestion d'état complexes car dans Vuex, vous êtes capable de gérer tous les appels asynchrones via des actions qui s'exécutent toujours de manière asynchrone, puis de valider la mutation une fois que vous avez le résultat. de manière immuable (ce qui est préféré). C'est une approche avec état.
Il existe également d'autres approches. Mais ce sont ceux que je suis dans mon code.
J'utilise axios comme client HTTP pour passer des appels api, j'ai créé un
gateways
dossier dans monsrc
dossier et j'ai mis des fichiers pour chaque backend, créant des instances axios , comme suitmyApi.js
Maintenant dans votre composant, vous pouvez avoir une fonction qui récupérera les données de l'API comme suit:
Comme je suppose que vous souhaitez réutiliser cette méthode dans plusieurs composants, vous pouvez utiliser des mixins de vue.js:
Vous pouvez donc ajouter une méthode dans mixin et elle sera disponible dans tous les composants, où mixin sera mélangé. Voir l'exemple suivant:
la source
J'utilise principalement Vue Resource.
1.Je crée un nouveau fichier où je me connecte au point de terminaison de l'API en utilisant
Vue.http.xxx
.Donc disons que nous avons un point de terminaison qui génère les messages.Créez un nouveau répertoire dans votre projet, je l'appelleservices
, puis créez le fichier appeléPostsService.js
- le contenu ressemble à ceci:Ensuite, je vais au composant où je veux utiliser ce service, et je l'importe
Pour plus d'informations sur cette approche, n'hésitez pas à consulter mon dépôt sur GitHub https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app
la source
Je suggère de créer un fournisseur d'API auquel vous pouvez accéder de n'importe où dans votre application.
Créez simplement un
src/utils
dossier et à l'intérieur de celui-ci un fichier appeléapi.js
.Dans celui-ci, exportez votre wrapper qui sait comment communiquer avec votre API en tant qu'objet ou classe statique ES6 (je préfère à quoi cette dernière ressemble et fonctionne si vous n'avez pas peur des classes). Ce fournisseur peut utiliser n'importe quelle bibliothèque de requêtes HTTP que vous aimez et vous pouvez facilement l'échanger plus tard en modifiant un seul fichier (celui-ci) au lieu de rechercher toute la base de code. Voici un exemple d'utilisation d'axios, en supposant que nous ayons une API REST disponible à
api.example.com/v1
qui utilise SSL:Ensuite, dans votre
main.js
fichier ou partout où vous démarrez l'application Vue, procédez comme suit:Vous pouvez maintenant y accéder n'importe où dans votre application Vue ainsi que partout où vous importez Vue elle-même:
ou:
J'espère que cela t'aides.
la source
Je pense que pour votre question simple, la réponse pourrait être n'importe quel module ES6 contenant des fonctions (équivalentes aux méthodes de classe dans ANgular) et les importer directement dans des composants à l'aide d'importations et d'exportations ES6. Il n'y a pas de tels services qui pourraient être injectés dans les composants.
la source
Vous pouvez créer votre propre service où vous pouvez passer tous vos appels de serveur HTTP, puis les importer dans les composants où vous souhaitez les utiliser.
Le mieux est d'utiliser Vuex pour des applications de gestion d'état complexes car dans Vuex, vous êtes capable de gérer tous les appels asynchrones via des actions qui s'exécutent toujours de manière asynchrone, puis de valider la mutation une fois que vous avez le résultat. de manière immuable (ce qui est préféré). C'est une approche avec état.
Il existe également d'autres approches. Mais ce sont ceux que je suis dans mon code.
la source