Uso de lodash en toda la plantilla de componente vue

¿Puedo usar lodash _ en todo mi componente vue?

Por ejemplo:

Tengo componentes organizados como a continuación:

App.vue > Parent.vue > Child.vue

Me gustaría que todos mis componentes puedan acceder a _ lodash sin definido en cada componente vm data

===

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

Author: antoniputra, 2016-06-08
Source

8 answers

Algunas de las respuestas actuales pueden funcionar en su escenario, pero tienen desventajas:

  • Agregar al objeto window significa que su proyecto Vue no puede ser renderizado por el servidor, porque los servidores no tienen acceso al objeto window.
  • Importar en cada archivo funciona bien, pero puede ser una molestia si tiene que recordar hacerlo en cada archivo.

Un enfoque alternativo es agregar su biblioteca al prototipo de Vue. Todos los componentes heredan de esto por lo que ahora todos serán puede acceder a su biblioteca desde la palabra clave this.

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

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

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

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

Esto se explica más a fondo en esta entrada de blog (que escribí).

Nota: La desventaja de este enfoque es que obtienes toda la biblioteca de Lodash, incluso si solo necesitas 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 requiere.

 45
Author: anthonygore,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-04 07:45:38

Puede importar el lodash en cada componente: 

<script>
  import _ from 'lodash'

  export default {
    methods: {
      test (value) {
        return _.isEmpty(value)
      }
    }
  }
</script>
 17
Author: Pantelis Peslis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-08 06:10:08

Podrías importar lodash globalmente así

window._ = require('lodash');

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

 12
Author: Brandon Ferens,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-11 17:02:26

Para plantillas en línea separadas del código del módulo js debería funcionar con: 

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

Y luego se puede utilizar en la plantilla en "nativo" manera - _.isEmpty(value).

 10
Author: antongorodezkiy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-18 20:34:38

Un enfoque simple que funcionó para mí:

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

Esto debería permitirle usar _ en todas las plantillas de componentes e instancias de vue.

 7
Author: newms87,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-28 19:03:38

Puedes usar plugin/mixin de esta manera.

import _ from 'lodash';
exports default {
    install : function(Vue, options){
        Vue.mixin({
            computed : {
                "_" : function(){
                    return _;
                }
            }
        });
    }
}
 3
Author: Hotbrains,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-17 06:15:50

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

Me gustaría señalar que en el tutorial, dejó import "jquery" en su aplicación.archivo js, que no es necesario. El plugin con importar automáticamente.

 1
Author: user5814,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-31 05:51:19

Echa un vistazo a vue-lodash!! Es una nueva envoltura para usar lodash en vue. Puede llamarlo usando

Vue._.random (20) / / para obtener un número aleatorio entre 20

Esto._.random (20) / / u otro método que desee utilizar

En cualquiera de los archivos del componente:)

 0
Author: Ewing,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-22 06:22:17