vue.js Nuxt.js导入数据库

5cg8jx4n 于 2023-03-13 发布在 Vue.js

关注(0)|答案(3)|浏览(193)

一周前刚开始使用Nuxt.js，我还没有掌握插件系统的窍门。
我的nuxt.config.js的相关部分如下所示：

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

我在plugins目录中创建了一个名为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

vue.js

来源：https://stackoverflow.com/questions/66101970/nuxt-js-import-lodash

3条答案

按热度按时间

vfh0ocws1#

我已经使用vue-lodash的Atif Zia's reccomendation将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被正确地打包。

赞(0）回复(0）举报 2023-03-13

ygya80vv2#

Hi @PrintlnParams您也可以使用vue-lodash包来实现
this.$_.sumBy() .
也可以将lodash导入为
import _ from "lodash"
或单个部件
import { sumBy } from "lodash"
与Nuxt.Js一起使用

赞(0）回复(0）举报 2023-03-13

f5emj3cl3#

下面是如何将Lodash导入到本地的Nuxt项目中。

<script lang="ts" setup>
import _ from 'lodash'

const data = [{ name: 'B' }, { name: 'A' }, { name: 'C' }]
const sortedData = _.orderBy(data, ['name'], ['asc'])
console.log(sortedData)
</script>

赞(0）回复(0）举报 2023-03-13

我来回答

vue.js Nuxt.js导入数据库

3条答案

相关问题

热门标签

最新问答