Utilisation de lodash dans tous les modèles de composants Vue

Question

Puis-je utiliser lodash _ dans tous mes composants Vue ?

par exemple :

J'ai organisé les composants comme suit :

App.vue > Parent.vue > Child.vue

Je voudrais que tous mes composants aient accès _ lodash sans défini dans chaque composant vm data

\===

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

Answer 1

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

• Ajoutant à la window signifie que votre projet Vue ne peut pas être rendu par le serveur, car les serveurs n'ont pas accès à l'objet window objet.
• 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 héritent de ce prototype et pourront donc accéder à votre bibliothèque à partir de la balise this mot-clé.

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

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

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

L'avantage d'utiliser Object.defineProperty plutôt qu'une affectation de propriété normale est que vous pouvez définir un descripteur qui vous permet de rendre la propriété en lecture seule, ce qu'elle sera par défaut. Cela empêche les composants consommateurs de l'écraser.

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

Note : 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 c'est un problème, il est préférable d'utiliser import { reduce, whatever } from "lodash"; en haut du fichier qui en a besoin.

Answer 2

Vous pourriez importer le lodash dans chaque composant :

<script>
  import _ from 'lodash'

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

Answer 3

Pour les modèles en ligne séparés du code du module js avec lequel ils doivent fonctionner :

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

Et ensuite vous pouvez l'utiliser dans le modèle dans "natif" chemin - _.isEmpty(value) .

Answer 4

Vous pourriez importer lodash globalement comme ceci

window._ = require('lodash');

Une fois que cela a été importé, vous aurez accès à _ de n'importe où.

Answer 5

Une approche simple qui a fonctionné pour moi :

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

Cela devrait vous permettre d'utiliser _ dans tous les modèles de composants et instances Vue.