javascript - template - Usando lodash en todas las plantillas de componentes vue

vue props default

Question

¿Puedo usar lodash _ en todos mis componentes 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 estar definidos en cada componente de data vm

===

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

Answer 1

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

• Agregar al objeto de la window significa que su proyecto Vue no puede ser procesado por el servidor, porque los servidores no tienen acceso al objeto de la window .
• Importar en cada archivo funciona bien, pero puede ser un dolor si tienes que recordar hacerlo en cada archivo.

Un enfoque alternativo es agregar su biblioteca al prototipo Vue. Todos los componentes heredan de esto, por lo que ahora podrán acceder a su biblioteca desde 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 archivo .vue puedes hacer esto sin importar nada:

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

La ventaja de usar Object.defineProperty lugar de una asignación de propiedad normal es que puede definir un descriptor que le permita hacer que la propiedad sea de solo lectura, que será por defecto. Esto evita que los componentes que consumen lo sobrescriban.

Esto se explica más detalladamente en esta publicación de blog (que escribí).

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

Answer 2

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

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

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

en cualquiera de los archivos de componentes :)

Answer 3

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 puede usarlo en la plantilla de forma "nativa" - _.isEmpty(value) .

Answer 4

Poco tarde en 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, encontré el paquete ProvidePlugin , que logra todo lo que el OP solicitó casi sin complicaciones. Para implementar esta solución, sigue este fantástico tutorial .

Me gustaría señalar que en el tutorial, dejó de import "jquery" en su archivo app.js, que no es obligatorio. El plugin con importarlo automáticamente.

Answer 5

Podrías importar lodash globalmente así

window._ = require(''lodash'');

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

Answer 6

Podrías importar el lodash en cada componente:

<script>
  import _ from ''lodash''

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

Answer 7

Puedes usar plugin / mixin como este.

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

Answer 8

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.