Utilizzo di lodash in tutto il modello di componente vue

Question

Posso usare lodash _ in tutti i miei componenti Vue?

ad esempio:

ho componenti organizzata come di seguito:

App.vue>Parent.vue>Child.vue

Vorrei tutta la mia componente può accedere _ lodash senza definito in ogni sua componente vm data

===

Sto anche provando a usare Mixins. Funziona. ma il risultato non previsto come questo _().isEmpty() invece di _.isEmpty()

Answer 1

Alcune delle risposte attuali può funzionare nel vostro scenario, ma non sono "buone pratiche":

• L'aggiunta all'oggetto window significa che il tuo progetto Vue non può essere reso come server, perché i server non hanno accesso all'oggetto window.
• L'importazione in ogni file funzionerà, ma è un problema perché devi ricordarti di farlo in ogni file.

Un approccio migliore è aggiungere la libreria al prototipo Vue.Tutti i componenti ereditano da questo in modo che ora saranno tutti in grado di accedere alla libreria dalla parola chiave this.

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

Ora il lodash è disponibile come metodo di istanza per tutti i componenti. In un file .vue si può fare questo senza importare nulla:

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

Il vantaggio di utilizzare Object.defineProperty piuttosto che un'assegnazione di proprietà normale è che si può definire un descrittore, che ti permette di fare la proprietà di sola lettura, che sarà di default.

Questo è più ampiamente spiegato in this blog post (che ho scritto).

Answer 2

Si potrebbe importare il lodash in ogni componente:

<script> 
    import _ from 'lodash' 

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

Answer 3

Per i modelli in linea separate dal codice del modulo js dovrebbe funzionare con:

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

E quindi è possibile utilizzarlo nel modello in "nativo" modo - _.isEmpty(value).

Answer 4

Si potrebbe importare lodash a livello globale come questo

window._ = require('lodash'); 

volta che è stato importato, si avrà accesso a _ da qualsiasi luogo.

Answer 5

È possibile utilizzare plug-in/mixin come questo.

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

Answer 6

Check out vue-lodash !! È un nuovo involucro per l'utilizzo di lodash in vue. Si può chiamare usando

Vue ._. Casuale (20) // per ottenere numero casuale compreso tra 20

questo ._. Casuale (20) // o altro metodo che si desidera utilizzare

in uno dei file del componente :)

Answer 7

Un approccio semplice che ha funzionato per me:

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

Questo dovrebbe consentire di utilizzare _ in tutti i modelli di componenti e le istanze VUE.