Puedo usar lodash _ en todos los de mi vue componente?

por ejemplo:

He componentes organizados, como el de abajo:

App.vue > Parent.vue > Child.vue

Me gustaría que todos mis componente puede tener acceso a _ lodash sin definidas en cada uno de los componentes de la vm data

===

También estoy tratando de usar Los Mixins. funciona. pero el resultado no esperado como este _().isEmpty() en lugar de _.isEmpty()

  • Es una de las mejores prácticas para incluir a cualquiera de los módulos necesarios dentro del componente
  • Podría usted ser más conciso? Donde es exactamente lo que usted desea utilizar subrayado? dentro de sus plantillas o simplemente en sus métodos / componente de la lógica? Si desea reducir la redundancia parece okey para mí si usted anexar un apátrida de la biblioteca como subrayan JS para el espacio de nombres global.
  • hay alguna forma reutilizable es?
  • Quiero usar el guión bajo en ambos componentes de la plantilla y de la lógica.
  • No estoy de acuerdo. Muy módulos comunes como Lodash debe ser importado a nivel mundial, por lo que no necesitamos escribir import lodash en todas partes.
InformationsquelleAutor antoniputra | 2016-06-08

9 Comentarios

  1. 65

    Algunas de las respuestas pueden trabajar en su escenario, pero tienen dos inconvenientes:

    • Añadir a la window objeto significa que su Vue proyecto no puede ser servidor prestados, debido a que los servidores no tienen acceso a la window objeto.
    • La importación en cada archivo funciona bien, pero puede ser un dolor si usted tiene que acordarse de hacerlo en cada archivo.

    Un enfoque alternativo es para añadir a su biblioteca a la Vue prototipo. Todos los componentes heredan de esta manera que ahora todos podrán acceder a la biblioteca de la this palabra clave.

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

    Ahora lodash está disponible como un método de instancia para todos los componentes. En un .vue de archivo puede hacer esto sin importar nada:

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

    La ventaja de usar Object.defineProperty en lugar de una normal de asignación de propiedad es la que puede definir un descriptor que le permite hacer que la propiedad de solo lectura, que será por defecto. Este deja de consumir los componentes de sobrescribirlo.

    Esto es más bien explicado en este blog (que escribí).

    Nota: La desventaja de este enfoque es que usted reciba toda la Lodash de la biblioteca, incluso si usted sólo necesita una o dos funciones. Si eso es un problema, lo mejor es usar import { reduce, whatever } from "lodash"; en la parte superior del archivo que lo requieran.

    • FYI – puede escribir como Vue.el prototipo.$lodash = lodash
    • Gracias! Yo alias lodash con $_
    • He añadido mi solución a continuación, utilizando el Webpack ProvidePlugin, que creo que es aún más limpio y más simple manera de hacer las cosas.
    • No me gusta Vue.el prototipo.$lodash = lodash tanto como se pueda sobrescribir. Por defecto, los valores agregados de usar el Objeto.defineProperty() son inmutables.
    • El otro es más práctico desventaja de este método es que en un sentido no trivial app podrás correr constantemente en problemas donde la vue instancia no está aún disponible en varios ganchos y por lo que se dejó en el mismo barco. Creo que esto es mejor utilizar sólo para libs que saber siempre estarás accediendo desde dentro de un área donde la Vue ejemplo se crea una instancia y si es un propósito general lib utilizado en todo, entonces debe ir en la Ventana (Hay un montón de soluciones para la Ventana de acceso en el lado del servidor de procesamiento, no es un problema) o ser importados de forma individual.
  2. 21

    Podría importar la lodash en cada componente:

    <script>
      import _ from 'lodash'
    
      export default {
        methods: {
          test (value) {
            return _.isEmpty(value)
          }
        }
      }
    </script>
    • el ejemplo de código es sólo la envoltura isEmpty método. ¿qué hay de los otros lodash métodos?
    • Esto es sólo un ejemplo basado en el tuyo. Usted puede reemplazar la isEmpty con cualquier lodash método.
    • el uso de la importación es la manera correcta de si el uso de lodash (_) en el componente hijo.
    • Yo downvote porque tenemos miles de vue archivos, y no queremos que se repita el tipo en import lodash en todas partes. Eso no es una buena práctica.
  3. 15

    Para plantillas en línea separada de la js código del módulo se debe trabajar con:

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

    Y, a continuación, se puede utilizar en la plantilla en «nativo» manera – _.isEmpty(value).

  4. 12

    Podría importar lodash a nivel mundial como este

    window._ = require('lodash');

    Una vez que se ha importado, usted tendrá acceso a _ desde cualquier lugar.

    • Yo votada abajo porque la ventana no está definido cuando el servidor de procesamiento de la aplicación.
    • También no se olvide de agregar a continuación el código en .eslintrc.js archivo, de lo contrario ESLint siempre quejarse de _ is undefined. globals: { _: false, },
    • Yo upvoted y creo que este debería ser considerado seriamente porque: 1) en una aplicación que no sea trivial ejecutar en todo tipo de cuestiones en las que la Vue instancia no está disponible todavía, pero necesita la biblioteca 2) pocas personas que realmente necesitan preocuparse acerca de la representación del servidor, que parece pedante protesta por ninguna razón.
  5. 8

    Un enfoque sencillo que trabajó para mí:

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

    Este debe permitir que usted utilice _ en todas las plantillas de componente y vue instancias.

    • No funciona..
    • esta solución sólo funciona para uno de mis proyectos, no en otro, no sé por qué… raro.
  6. 7
    import _ from 'lodash'
    Vue.prototype._ = _

    Insertar estas líneas en su main.js archivo y va a trabajar todo tu aplicación.

  7. 3

    Puede utilizar el plug-in/mixin como este.

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

    Poco tarde a la fiesta, pero a través de mi investigación de encontrar una manera de importar lodash y otras bibliotecas en todas mis .vue archivos, me encontré con el webpack ProvidePlugin, que logra todo lo que el OP se solicita con casi ningún alboroto. Para implementar esta solución, después de este fantástico tutorial.

    Quiero señalar que en el tutorial, dejó import "jquery" en su app.js el archivo, que no es necesario. El plugin de importación de forma automática.

  9. 0

    Retirar vue-lodash!!
    Es un nuevo contenedor para el uso de lodash en vue.
    Se le puede llamar usando

    Vue._.aleatorio(20) //para obtener números aleatorios entre 20

    esto._.aleatorio(20) //u otro método que desea utilizar

    en cualquiera de los componentes de archivo 🙂

    • Esto funciona, pero, ¿realmente necesitamos otro módulo en el proyecto para agregar algo que puede ser añadido manualmente con una línea?
    • Creo que están haciendo un buen punto, pero depende de la persona. Porque algunas personas podrían quiere utilizar a menudo en un gran proyecto que contiene una gran cantidad de .vue archivo, pero algunos solo lo use para uno .vue componente. Igual que la idea de tener vue-axios. No es necesario pero es sin duda conveniente en algunos casos! 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here