J'ai un projet Vue 2 qui a de nombreux (50+) composants mono-fichier . J'utilise Vue-Router pour le routage et Vuex pour l'état.
Il existe un fichier, appelé helpers.js , qui contient un ensemble de fonctions générales, telles que la mise en majuscule de la première lettre d'une chaîne. Ce fichier ressemble à ceci:
export default {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
}
Mon fichier main.js initialise l'application:
import Vue from 'vue'
import VueResource from "vue-resource"
import store from "./store"
import Router from "./router"
import App from "./components/App.vue"
Vue.use(VueResource)
const app = new Vue({
router: Router,
store,
template: '<app></app>',
components: { App }
}).$mount('#app')
Mon fichier App.vue contient le modèle:
<template>
<navbar></navbar>
<div class="container">
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
//stuff
}
}
}
</script>
J'ai alors un tas de composants à fichier unique, que Vue-Router gère pour naviguer à l'intérieur de la <router-view>
balise dans le modèle App.vue.
Maintenant, disons que j'ai besoin d'utiliser la capitalizeFirstLetter()
fonction dans un composant défini dans SomeComponent.vue . Pour ce faire, je dois d'abord l'importer:
<template>Some Component</template>
<script>
import {capitalizeFirstLetter} from '../helpers.js'
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = this.capitalizeFirstLetter(this.myString)
}
}
</script>
Cela devient rapidement un problème car je finis par importer la fonction dans de nombreux composants différents, sinon dans tous. Cela semble répétitif et rend également le projet plus difficile à maintenir. Par exemple, si je veux renommer helpers.js, ou les fonctions qu'il contient, je dois ensuite accéder à chaque composant qui l'importe et modifier l'instruction d'importation.
Pour faire court: comment rendre les fonctions de helpers.js globalement disponibles afin de pouvoir les appeler dans n'importe quel composant sans avoir à les importer au préalable, puis à les ajouter this
au nom de la fonction? Je veux essentiellement pouvoir faire ceci:
<script>
export default {
data() {
return {
myString = "test"
}
},
created() {
var newString = capitalizeFirstLetter(this.myString)
}
}
</script>
la source
this
.Réponses:
Ce que vous avez décrit est mixin .
C'est un mixin global. avec cela TOUS vos composants auront une
capitalizeFirstLetter
méthode, vous pouvez donc appelerthis.capitalizeFirstLetter(...)
des méthodes de composant ou vous pouvez l'appeler directement commecapitalizeFirstLetter(...)
dans le modèle de composant.Exemple de travail: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010
Voir la documentation ici: https://vuejs.org/v2/guide/mixins.html
la source
capitalizeFirstLetter
partir d'uneconst vm = new Vue()
instance? Parce quevm.capitalizeFirstLetter
ça ne marche pas.capitalizeFirstLetter
fonction dans le mixin ou en auront-ils leur propre copie? Je recherche un endroit pour stocker une fonction qui devrait être accessible à tous les composants, mais sans aucun rapport avec eux (récupérer les données d'un serveur pour les stocker dans un stockage vuex)Sinon, vous pouvez essayer de faire fonctionner vos helpers avec un plugin:
Dans votre
helper.js
exportation de vos fonctions, de cette façon:ou
Vous devriez alors pouvoir les utiliser n'importe où dans vos composants en utilisant:
this.$helpers.capitalizeFirstLetter()
ou n'importe où dans votre application en utilisant:
Vue.helpers.capitalizeFirstLetter()
Vous pouvez en savoir plus à ce sujet dans la documentation: https://vuejs.org/v2/guide/plugins.html
la source
Créez un nouveau mixin:
"src / mixins / generalMixin.js"
Puis importez-le dans votre main.js comme:
À partir de maintenant, vous pourrez utiliser la fonction comme
this.capitalizeFirstLetter(str)
dans votre script de composant ou sansthis
dans un modèle.Vous devez utiliser
this
parce que vous avez mélangé une méthode dans l'instance principale de Vue. S'il existe des moyens de le supprimer,this
cela impliquera probablement quelque chose de non conventionnel, c'est au moins une manière documentée de partager des fonctions qui sera facile à comprendre pour tous les futurs développeurs Vue de votre projet.la source
Créez un fichier séparé pour la lisibilité (vient de déposer le mien dans le dossier plugins). Reproduit des réponses @CodinCat et @digout
Puis importez dans votre fichier main.js ou app.js
USAGE:
Appelez
this.sampleFunction()
outhis.capitalizeFirstLetter()
la source
Utilisez un filtre global s'il ne concerne que la mise en forme des données lors du rendu. Voici le premier exemple de la documentation :
la source
Excellente question. Dans mes recherches, j'ai trouvé que vue-inject peut gérer cela de la meilleure façon. J'ai de nombreuses bibliothèques de fonctions (services) séparées des méthodes de gestion de la logique des composants vue standard. Mon choix est que les méthodes des composants soient simplement des délégués qui appellent les fonctions de service.
https://github.com/jackmellis/vue-inject
la source
Importez-le dans le fichier main.js comme 'store' et vous pourrez y accéder dans tous les composants.
la source