j'ai
import axios from 'axios';
import router from '@/router';
const ApiService = {
init(baseURL) {
axios.defaults.baseURL = baseURL;
},
//...
doSomething() {
router.push({ path: '/goSomewhere' });
},
}
export default ApiService
Si je le raccourcis (comme je suis utilisé dans Angular):
<template> <button @click="ApiService.doSomething">...</button> </template> <script> import ApiService from '../service/api.service'; </script>
Cela ne fonctionne pas, génère une erreur d'exécution. (Cela ne fonctionne pas même si j'essaye en tant qu'appel de fonction: @ click = "ApiService.doSomething ()"
Pouvez-vous aider, comment gagner du temps / code et appeler directement ApiService.doSomething juste dans un modèle?
PS, ils m'ont demandé de publier également ApiService alors le voici: api.service.js:
<template>
<button @click="doSomething">...</button>
</template>
<script>
import ApiService from '../service/api.service';
export default {
setup() {
function doSomething() {
ApiService.doSomething();
}
return {
doSomething
}
}
}
</script>
3 Réponses :
Pourriez-vous essayer d'ajouter des parenthèses à l'appel de fonction?
<template> <button @click="ApiService.doSomething()">...</button> </template> <script> import ApiService from '../service/api.service'; </script>
Non, ça ne marche pas. Cependant, je modifierai la question
Cela ne fonctionne pas car vous devez le faire passer par la fonction de setup pour être disponible dans le modèle.
vous pouvez le faire cependant:
<template> <button @click="ApiService.doSomething">...</button> </template> <script setup> import ApiService from '../service/api.service'; export ApiService; </script>
Alternativement, vous pouvez également utiliser l'attribut setup pour le script, qui fait de la magie de levage pour vous. ( lien rfc )
<template>
<button @click="ApiService.doSomething">...</button>
</template>
<script>
import ApiService from '../service/api.service';
export default {
setup() {
return { ApiService }
}
}
</script>
Mais pour la deuxième solution, j'obtiens l'erreur du compilateur "'ApiService' est défini mais jamais utilisé"
mon mauvais, j'ai raté l'exportation
Fonctionne, mais j'ai dû mettre ApiService entre crochets: export {ApiService} sinon il a renvoyé une erreur: jeton inattendu, attendu "{"
Cette dernière solution renvoie une erreur: Cette syntaxe expérimentale nécessite l'activation du plugin parser: 'exportDefaultFrom'
La version précédente de votre deuxième solution était correcte, si j'enveloppe ApiService entre crochets.
intéressant. 🤔 selon github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/ ... cela aurait dû fonctionner. Je l'ai rétabli
Mais cela ne fonctionne pas de cette façon; la deuxième ligne devrait être: export {ApiService}. Je sais que c'est bizarre et ce compilateur me rend fou
peut-être que la différence réside dans le {___ as ___} 🤷♂️. Une des raisons pour lesquelles je préfère des définitions plus explicites.
vous pouvez également export {...ApiService} si vous voulez que toutes les fonctions soient disponibles sans l '"espace de noms"
Nan. Cela génère: "Erreur d'analyse: jeton inattendu"
Vous pouvez diffuser ces fonctions de service dans les méthodes d'option des methods:{...ApiService } :
const ApiService = {
doSomething() {
console.log("doing something");
},
doSomething2() {
console.log("doing something 2");
},
doSomething3() {
console.log("doing something 3");
}
};
export default ApiService;
api.service.js
<template>
<button @click="doSomething">...</button>
</template>
<script>
import ApiService from '../service/api.service';
export default {
methods:{
...ApiService
}
}
</script>
Comme Daniel l'a prouvé dans sa première solution, c'est possible.
Ok, qu'en est-il de ma suggestion?
Je ne veux pas utiliser comme 20 méthodes pour importer une par une ... (import {doSomething, doSomething2, doSomething3}) ... J'ai besoin de méthodes ApiService, c'est pourquoi c'est un service.
qu'en est-il de la diffusion de ce service dans les méthodes option methods:{...ApiService }
Que faire si j'ai besoin de "doSomething" dans ma vue actuelle et que j'utilise également doSomething du service? Mais veuillez mettre à jour la réponse avec le code complet pour que je puisse l'essayer, car votre solution initiale lève de toute façon une erreur d'exécution dans runtime-core.esm-bundler: impossible de lire la propriété 'apply' de undefined
de rien, veuillez vérifier ma réponse modifiée
Merci, mais je dois ensuite modifier tout mon ApiService. J'ai un POJO const ApiService = {...}, puis à la fin: exporter ApiService par défaut
veuillez partager un extrait de votre objet ApiService qui montre sa structure
il est également valable avec la syntaxe de votre objet import ApiService from '../service/api.service'; et methods:{...ApiService} veuillez consulter cette démo
Merci, cela fonctionne donc je vais donner votre commentaire ci-dessus un autre vote positif. Cependant, votre réponse ne reçoit pas de vote pour plusieurs raisons: je voulais une solution Vue3 avec setup (). Deuxièmement, je ne peux pas utiliser la méthode "doSomething" localement de cette façon à cause d'un conflit avec le même nom, je voulais spécifiquement avoir un appel "ApiService.doSomething" comme je l'ai mentionné dans ma question. Troisièmement, la solution Daniel était plus simple et correspondait à ce que je voulais et attendais de Vue3. Merci quand même.
vous êtes le bienvenu, j'ai essayé de fournir un code plus court comme vous l'avez demandé, j'ai suggéré la diffusion afin d'éviter d'appeler AppService.methodName chaque fois, si vous préférez l'API de composition, vous pouvez faire setup(){ return{...ApiService}} puis @click="doSomething"
mon approche est la même que mapActions de vuex lorsque vous répartissez les actions de magasin dans l'option de méthodes