Использование lodash во всех шаблонах компонентов vue

Можно ли использовать lodash _ во всем моем компоненте vue?

например:

У меня есть компоненты, как показано ниже:

App.vue > Parent.vue > Child.vue

Я хотел бы, чтобы весь мой компонент мог получить доступ к _ lodash, не определенному в каждом компоненте vm data

===

Я также пытаюсь использовать Mixins. оно работает. но результат не ожидается, как _().isEmpty() вместо _.isEmpty()

Ответы

Ответ 1

Некоторые из текущих ответов могут работать в вашем сценарии, но они не являются "лучшими практиками":

  • Добавление в объект window означает, что ваш проект Vue не может быть обработан сервером, потому что серверы не имеют доступа к объекту window.
  • Импортирование в каждом файле будет работать, но это боль, потому что вы должны помнить, что нужно делать это в каждом файле.

Лучший подход - добавить вашу библиотеку в прототип Vue. Все компоненты наследуются от этого, поэтому теперь они смогут получить доступ к вашей библиотеке из ключевого слова this.

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

Теперь lodash доступен как метод экземпляра для всех компонентов. В файле .vue вы можете сделать это, не импортируя ничего:

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

Преимущество использования Object.defineProperty, а не обычного назначения свойств состоит в том, что вы можете определить дескриптор, который позволяет вам сделать свойство только для чтения, которое оно будет по умолчанию.

Это более подробно описано в этом сообщении в блоге (которое я написал).

Ответ 2

Вы можете импортировать lodash в каждый компонент:

<script>
  import _ from 'lodash'

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

Ответ 3

Вы можете импортировать lodash глобально, как это

window._ = require('lodash');

После импорта вы получите доступ к _ из любого места.

Ответ 4

Для встроенных шаблонов, отделенных от кода модуля js, он должен работать с:

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

И затем вы можете использовать его в шаблоне в "родном" способе - _.isEmpty(value).

Ответ 5

Простой подход, который работал у меня:

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

Это должно позволить вам использовать _ во всех шаблонах компонентов и экземплярах vue.

Ответ 6

Вы можете использовать плагин /mixin, как это.

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

Ответ 7

Отъезд vue-lodash!! Это новая оболочка для использования lodash в vue. Вы можете вызвать его, используя

Vue._. random (20)//для получения случайного числа между 20

this._. random (20)//или другой метод, который вы хотите использовать

в любом из файлов компонентов:)