Nuxt.js 导入 lodash

Question

一周前刚开始使用 Nuxt.js，我还没有掌握插件系统的窍门。

我的nuxt.config.js 的相关部分如下所示：

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/lodash',
],

我在插件目录中创建了一个名为 lodash.js 的文件，如下所示：

import Vue from 'vue';
import lodash from 'lodash';

Vue.use(lodash);

但是在我的.vue 组件中，当我console.log('lodash:', this.lodash) 时，它会打印出lodash: undefined，而当我尝试使用this.lodash.pick(['a'], { a: 'a', b: 'b' }) 时，它会抛出错误：TypeError: Cannot read property 'pick' of undefined。

然后我尝试使用this.$lodash（添加了一个$），然后当我console.log('lodash:', this.$lodash)，它记录lodash: ƒ，并使用console.log('lodash:', this.$lodash())（像函数一样调用它）记录lodash: LodashWrapper {__wrapped__: undefined, __actions__: Array(0), __chain__: false, __index__: 0, __values__: undefined}（即具有一堆毫无价值的属性的对象）。

然后我想也许Vue.use() 不是要走的路，也许我应该注入 lodash，所以我将我的 lodash.js 插件文件更改为如下所示：

import lodash from 'lodash';

export default({ app }, inject) => {
  inject('lodash', lodash);
}

但这导致完全相同的结果。现在我不知道还能尝试什么。所以我的问题是如何在 nuxt.js 项目中安装和使用 lodash（我想是任何其他随机的 npm 模块）？

FWIW 我的项目正在运行 nuxt 版本 2.14.12

Answer 1

我已经使用Atif Zia's reccomendation 的vue-lodash 将lodash 添加到this.$_。

plugins/lodash.js:

import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'

Vue.use(VueLodash, { name: '$_', lodash })

nuxt.config.js:

export default {
...
plugins: ['~/plugins/lodash.js'],
...
}

在脚本中的使用：

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
this._.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

查看他们的 GitHub，看起来这个包允许 lodash 正确地进行 webpacked。

Answer 2

你好@PrintlnParams 你也可以使用vue-lodash包来实现

this.$_.sumBy().

或者您可以将 lodash 导入为

import _ from "lodash"

或单个组件作为

import { sumBy } from "lodash"

与 Nuxt.Js 一起使用