web-dev-qa-db-ja.com

すべてのvueコンポーネントテンプレートでlodashを使用する

すべてのvueコンポーネントでlodash _を使用できますか？

例えば：

以下のように構成されたコンポーネントがあります。

App.vue> Parent.vue> Child.vue

すべてのコンポーネントvm dataで定義せずに、すべてのコンポーネントが_ lodashにアクセスできるようにしたい

===

Mixins も使用しようとしています。できます。しかし、結果は_().isEmpty()ではなく_.isEmpty()のように期待されていません

javascriptlodashvue.jsvue-component
43
antoniputra

現在の回答の一部はシナリオで機能する場合がありますが、欠点があります。

  • windowオブジェクトに追加すると、サーバーはwindowオブジェクトにアクセスできないため、Vueプロジェクトをサーバーレンダリングできません。
  • すべてのファイルでのインポートは正常に機能しますが、すべてのファイルでインポートすることを忘れないでください。

別のアプローチは、ライブラリをVueプロトタイプに追加することです。すべてのコンポーネントはこれを継承するため、thisキーワードからライブラリにアクセスできるようになります。

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

現在、lodashはすべてのコンポーネントのインスタンスメソッドとして使用できます。 .vueファイルでは、何もインポートせずにこれを行うことができます。

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

通常のプロパティの割り当てではなくObject.definePropertyを使用する利点は、デフォルトでプロパティを読み取り専用にすることができる記述子を定義できることです。これにより、コンポーネントの消費が上書きされなくなります。

これは このブログ投稿 （私が書いた）でさらに詳しく説明されています。

注：このアプローチの欠点は、1つまたは2つの関数のみが必要な場合でも、Lodashライブラリ全体を取得できることです。それが問題である場合、それを必要とするファイルの先頭でimport { reduce, whatever } from "lodash";を使用するのが最善です。

64
anthonygore

lodashを各コンポーネントにインポートできます。

<script>
  import _ from 'lodash'

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

Jsモジュールコードから分離されたインラインテンプレートの場合、次のように動作します。

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

そして、テンプレートで"native" way-_.isEmpty(value)で使用できます。

15
antongorodezkiy

このようにlodashをグローバルにインポートできます

window._ = require('lodash');

インポートすると、どこからでも_にアクセスできます。

12
Brandon Ferens

私のために働いた簡単なアプローチ：

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

これにより、すべてのコンポーネントテンプレートおよびvueインスタンスで_を使用できるようになります。

8
newms87
import _ from 'lodash'
Vue.prototype._ = _

これらの行をmain.jsファイルに挿入すると、アプリ全体で機能します。

7
butaminas

このようにplugin/mixinを使用できます。

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

パーティーに少し遅れましたが、lodashや他のライブラリをすべての.vueファイルにインポートする方法を見つけるための調査を通して、webpack ProvidePlugin に遭遇しました。このソリューションを実装するには、この素晴らしい tutorial に従ってください。

チュートリアルでは、彼はapp.jsファイルにimport "jquery"を残したことに注意してください。これは必須ではありません。プラグインはそれを自動的にインポートします。

2
user8888

Vue-lodashをご覧ください!!これは、vueでlodashを使用するための新しいラッパーです。を使用して呼び出すことができます

Vue ._。random（20）// 20の間の乱数を取得するため

this ._。random（20）//または使用する他のメソッド

コンポーネントファイルのいずれかで:)

0
Ewing