71

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

例如：

我有如下组织的组件：

App.vue> Parent.vue>Child.vue

我希望我的所有组件都可以访问_lodash 而不在每个组件 vm 中定义data

===

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

4

12 回答 12

98

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

  • 添加到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而不是普通属性分配的优点是您可以定义一个描述符，该描述符允许您将属性设置为只读，默认情况下它将是只读的。这会阻止消耗组件覆盖它。

这在这篇博文（我写的）中有更详尽的解释。

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

于 2017-04-22T06:58:38.587 回答
33

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

<script>
  import _ from 'lodash'

  export default {
    methods: {
      test (value) {
        return _.isEmpty(value)
      }
    }
  }
</script>
于 2016-06-08T06:10:08.343 回答
22

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

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

然后您可以在模板中以“本机”方式使用它 - _.isEmpty(value).

于 2016-08-18T20:34:38.823 回答
17 
import _ from 'lodash'
Vue.prototype._ = _

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

于 2018-11-22T16:23:09.247 回答
12

lodash你可以像这样全局导入

window._ = require('lodash');

导入后，您将可以_从任何地方访问。

于 2016-10-11T17:02:26.350 回答
11

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

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

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

于 2017-08-28T19:03:38.893 回答
5

你可以像这样使用插件/mixin。

import _ from 'lodash';
exports default {
    install : function(Vue, options){
        Vue.mixin({
            computed : {
                "_" : function(){
                    return _;
                }
            }
        });
    }
}
于 2017-03-17T06:15:50.467 回答
3

聚会有点晚了，但是通过我寻找一种将 lodash 和其他库导入我所有 .vue 文件的方法的研究，我遇到了 webpack ProvidePlugin ，它几乎毫不费力地实现了 OP 要求的所有内容。要实施此解决方案，请遵循此精彩教程。

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

于 2018-03-31T05:51:19.863 回答
1

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

Vue._.random(20) // 用于获取 20 之间的随机数

this._.random(20) //或你想使用的其他方法

在任何组件文件中:)

于 2017-04-22T06:22:17.187 回答
0

正确的方法是这样使用提供/注入：

import _ from 'lodash';

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

然后在另一个组件中：

<script>
    export default {
        name: 'аnоthег-component',
        inject: [
            '$_'
        ]
    }
</script>
于 2022-02-16T19:21:23.490 回答
0

对于 vue 用户

转到 main.js

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

对于 nuxt.js 用户

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

插件/main.js

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

然后添加到 nuxt.config.js

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

vue 和 nuxt js 的用法相同

然后在组件中使用

this.$_.map(arra,(x)=>{})
于 2021-07-19T05:28:34.190 回答
0

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

// 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
    },
  },
});

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

缺点是它更冗长，您必须记住从基本组件继承。

于 2020-03-10T16:17:29.517 回答