在所有 vue 组件模板中使用 lodash

Question

我可以在我所有的 vue 组件中使用 lodash _ 吗？

例如：

我的组件组织如下：

App.vue > Parent.vue > Child.vue

我希望我的所有组件都可以访问 _ lodash 而无需在每个组件 vm 中定义 data

===

我也在尝试使用 Mixins。有用。但结果不是这样 _().isEmpty() 而不是 _.isEmpty()

Answer 1

您可以将 lodash 导入每个组件：

<script>
  import _ from 'lodash'

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

Answer 2

对于与 js 模块代码分离的内联模板，它应该适用于：

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

然后您可以在模板中以 "native" 的方式使用它 - _.isEmpty(value).

Answer 3

您可以像这样全局导入 lodash

window._ = require('lodash');

一旦导入，您就可以从任何地方访问_。

Answer 4

你可以这样使用plugin/mixin。

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

Answer 5

查看 vue-lodash！！它是在 vue 中使用 lodash 的新包装器。您可以使用

调用它

Vue._.random(20) // for getting random number between 20

this._.random(20) //or other method you want to use

在任何组件文件中:)

Answer 6

当前的一些答案可能适用于您的情况，但它们也有缺点：

添加到 window 对象意味着你的 Vue 项目不能被服务器渲染，因为服务器无法访问 window 对象。
在每个文件中导入都可以正常工作，但如果您必须记住在每个文件中都进行导入，这可能会很痛苦。

另一种方法是将您的库添加到 Vue 原型。所有组件都继承自此，因此它们现在都可以通过 this 关键字访问您的库。

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

现在 lodash 可以作为所有组件的实例方法使用。在 .vue 文件中，您可以在不导入任何内容的情况下执行此操作：

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

使用 Object.defineProperty 而不是正常的属性赋值的优点是您可以定义一个描述符，它允许您将属性设置为只读，它将是默认。这会阻止消耗组件覆盖它。

这在 this blog post（我写的）中有更详尽的解释。

注意：这种方法的缺点是你得到了整个 Lodash 库，即使你只需要一个或两个函数。如果这是一个问题，最好在需要它的文件顶部使用 import { reduce, whatever } from "lodash";。

Answer 7

一个对我有用的简单方法：

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

这应该允许您在所有组件模板和 vue 实例中使用 _。

Answer 8

晚会有点晚了，但通过我的研究，找到一种将 lodash 和其他库导入我所有 .vue 文件的方法，我遇到了 webpack ProvidePlugin, which achieves everything the OP requested with almost no fuss. To implement this solution, following this fantastic tutorial。

我会注意到，在教程中，他在他的 app.js 文件中留下了 import "jquery"，这不是必需的。自动导入的插件。

Answer 9

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

将这些行插入到您的 main.js 文件中，它将在您的整个应用程序中运行。

Answer 10

您还可以创建一个基础组件并让所有组件扩展它。

// base-component
import _ from 'lodash';

export default Vue.extend({
  computed: {
    _() {
      return _;
    },
  },
});

// my-component
import BaseComponent from 'path/to/base-vue';

export default BaseComponent.extend({
  template: '<p>Lodash is available: {{!!_}}</p>'
  methods: {
    doSomehting() {
      // `this._` should be available
    },
  },
});

这种方法的pro是它没有侵入性，所以将来不会与Vue发生冲突。此外，您可以向 BaseComponent 添加更多内容，例如其他库和外部服务，它们将可供所有其他组件使用。

con 更冗长，您必须记住从基础组件继承。

Answer 11

对于 vue 用户

转到main.js

import _ from 'lodash'
Vue.set(Vue.prototype, '$_', _)

对于 nuxt.js 用户

在插件文件夹中创建 main.js

plugin/main.js

import _ from 'lodash'
Vue.set(Vue.prototype, '$_', _)

然后加入 nuxt.config.js

  plugins: ['~plugins/main.js'],

vue 和 nuxt js 的用法相同

然后在组件中使用

this.$_.map(arra,(x)=>{})

Answer 12

正确的方法是这样使用provide / inject：

import _ from 'lodash';

const app = createApp({
        provide: {
            $_: _,
        }
    });

然后在另一个组件中：

<script>
    export default {
        name: 'аnоthег-component',
        inject: [
            '$_'
        ]
    }
</script>

在所有 vue 组件模板中使用 lodash

Using lodash in all of vue component template

javascript

lodash

vue.js

vue-component