Question

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

例如：

我的组件如下所示：

App.vue＆gt; Parent.vue＆gt; Child.vue

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

===

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

那样

Answer 1

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

添加到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 2

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

<script>
  import _ from 'lodash'

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

Answer 3

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

一起使用

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

然后您可以在“原生”方式的模板中使用它 - _.isEmpty(value)。

Answer 4

您可以像这样全局导入lodash

window._ = require('lodash');

导入后，您可以随时随地访问_。

Answer 5

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

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

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

Answer 6

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

将这些行插入到main.js文件中，它将在整个应用程序中正常工作。

Answer 7

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

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

Answer 8

有点迟到了，但通过我的研究找到了将lodash和其他库导入我所有的.vue文件的方法，我遇到了webpack ProvidePlugin，它实现了OP请求的所有内容，几乎没有大惊小怪。要实现此解决方案，请遵循这个梦幻般的tutorial。

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

Answer 9

查看vue-lodash !! 这是在vue中使用lodash的新包装器。你可以用

来调用它

Vue ._。random（20）//获取20之间的随机数

这个._。random（20）//或你想要使用的其他方法

在任何组件文件中：）

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

Emp_id = c(121,122,191,181,277,333)  
salary = c(7838,8389,8940,9491,10042,10593)  
Country = c("USA","USA","UK","USA","UK","USA")

Emp_lst = c(121,191,181)

library(dplyr)
df_flter = df %>% filter(Emp_id %in% Emp_lst)
df_flter

  Emp_id salary Country
1    121   7838     USA
2    191   8940      UK
3    181   9491     USA

对于 nuxt.js 用户

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

插件/main.js

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

然后加入 nuxt.config.js

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

vue 和 nuxt js 的用法相同

然后在组件中使用

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

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

11 个答案: