web-dev-qa-db-fra.com

Utilisation de lodash dans tous les vue modèle de composant

Puis-je utiliser lodash _ Dans tous mes vue composant?)?

par exemple:

J'ai des composants organisés comme ci-dessous:

App.vue> Parent.vue> Child.vue

Je voudrais que tout mon composant puisse accéder à _ Lodash sans être défini dans chaque composant vm data

===

J'essaie également d'utiliser Mixins . Ça marche. mais le résultat n'est pas attendu comme ceci _().isEmpty() au lieu de _.isEmpty()

javascriptlodashvue.jsvue-component
43
antoniputra

Certaines des réponses actuelles peuvent fonctionner dans votre scénario, mais elles présentent des inconvénients:

  • Ajouter à l'objet window signifie que votre projet Vue ne peut pas être rendu sur le serveur, car les serveurs n'ont pas accès à l'objet window.
  • L'importation dans chaque fichier fonctionne bien, mais cela peut être pénible si vous devez vous rappeler de le faire dans chaque fichier.

Une autre approche consiste à ajouter votre bibliothèque au prototype Vue. Tous les composants en héritent pour qu'ils puissent désormais tous accéder à votre bibliothèque à partir du mot clé this.

import _ from 'lodash';    
Object.defineProperty(Vue.prototype, '$_', { value: _ });

Maintenant, lodash est disponible en tant que méthode d'instance pour tous les composants. Dans un fichier .vue, vous pouvez le faire sans rien importer:

export default {
  created() {
    console.log(this.$_.isEmpty(null));
  }
}

L'avantage d'utiliser Object.defineProperty _ plutôt que l’affectation normale d’une propriété, c’est que vous pouvez définir un descripteur qui vous permet de rendre la propriété en lecture seule, ce qui sera le cas par défaut. Cela arrête de consommer des composants de l’écraser.

Ceci est expliqué plus en détail dans cet article de blog (que j'ai écrit).

Remarque : L'inconvénient de cette approche est que vous obtenez l'intégralité de la bibliothèque Lodash, même si vous n'avez besoin que d'une ou deux fonctions. Si cela pose un problème, mieux vaut utiliser import { reduce, whatever } from "lodash"; en haut du fichier le nécessitant.

64
anthonygore

Vous pouvez importer le lodash dans chaque composant:

<script>
  import _ from 'lodash'

  export default {
    methods: {
      test (value) {
        return _.isEmpty(value)
      }
    }
  }
</script>
21
Pantelis Peslis

Pour les modèles en ligne séparés du code du module js, cela devrait fonctionner avec:

  Vue.component('some-tag', {
    computed: {
      _() {
        return _;
      }
    }
  });

Et puis, vous pouvez l'utiliser dans le modèle de "native" façon - _.isEmpty(value).

15
antongorodezkiy

Vous pouvez importer lodash globalement comme ceci

window._ = require('lodash');

Une fois importé, vous aurez accès à _ de partout.

12
Brandon Ferens

Une approche simple qui a fonctionné pour moi:

Vue.set(Vue.prototype, '_', _);

Cela devrait vous permettre d’utiliser _ dans tous les modèles de composant et les instances vue.

8
newms87
import _ from 'lodash'
Vue.prototype._ = _

Insérez ces lignes dans votre fichier main.js et cela fonctionnera partout dans votre application.

7
butaminas

Vous pouvez utiliser le plugin/mixin comme ceci.

import _ from 'lodash';
exports default {
    install : function(Vue, options){
        Vue.mixin({
            computed : {
                "_" : function(){
                    return _;
                }
            }
        });
    }
}
3
Hotbrains

Peu de temps en retard pour le parti, mais en cherchant un moyen d’importer Lodash et d’autres bibliothèques dans tous mes fichiers .vue, j’ai rencontré le WebPack ProvidePlugin , qui permet de réaliser presque tout ce que le PO demande. Pour mettre en œuvre cette solution, suivez ce fantastique tutoriel .

Je tiens à noter que dans le tutoriel, il a quitté import "jquery" dans son fichier app.js, ce qui n’est pas obligatoire. Le plugin avec l'importe automatiquement.

2
user8888

Découvrez la vue-lodash !! C'est un nouvel emballage pour utiliser Lodash en vue. Vous pouvez l'appeler en utilisant

Vue ._. Random (20) // pour obtenir un nombre aléatoire compris entre 20

this ._. random (20) // ou autre méthode que vous voulez utiliser

dans l'un des fichiers composant :)

0
Ewing