如何在 VueJs 项目中导入单个 Lodash 函数？答案

【问题标题】：How to import a single Lodash function in a VueJs project?如何在 VueJs 项目中导入单个 Lodash 函数？
【发布时间】：2020-11-06 10:51:26
【问题描述】：

我正在尝试在我的 VueJs 项目中导入 debounce 函数。

我跑了：npm i --save lodash.debounce

然后我将它导入到我的项目中：import { debounce } from 'lodash/debounce'

并尝试使用它：

debounce(() => {
    console.log('I only get fired once every two seconds, max!')
}, 2000)

我也尝试将其导入为import debounce from 'lodash/debounce'，但无论我做什么，我都无法让它工作。

我阅读了这篇堆栈帖子，但这似乎也不起作用：How to Import a Single Lodash Function?

有人知道怎么做吗？

谢谢。

【问题讨论】：

import debounce from 'lodash.debounce'
也试过@ShayaUlman。但是我如何在我的代码中实际使用它？因为我给出的代码示例没有运行或给我错误...
有什么错误？你确定它安装正确吗？
如果我使用this.debounce()，错误是：this.debounce is not a function，如果我只使用debounce()，错误是"TypeError: Object(...) is not a function"。我正确安装了它，因为它在我的 package.json 中声明为依赖项：` "lodash.debounce": "^4.0.8",`
我测试了几种不同的可能性，现在它打印： ƒ debounce(func, wait, options) { var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0,leading = false , maxing = false 这让我认为我现在正确导入了它？调用该方法时，它仍然不记录任何内容。

标签： javascript node.js vue.js vuejs2 lodash

【解决方案1】：

问题不在于导入单个 Lodash 函数，debounce 只是返回一个函数（原始传递函数的新版本）。要调用原始函数，您需要调用 debounce 返回的函数。

这可能就是你想要的：

<script>
import debounce from 'lodash/debounce';

export default {
  // ...
  methods: {
    origFunction() {
      console.log('I only get fired once every two seconds, max!');      
    },
  },
  computed: {
    // Create a debounced function
    // As it is a computed prop it will be cached, and not created again on every call
    debouncedFunction() {
      return debounce(this.origFunction, 2000);
    }
  },
  created() {
    this.debouncedFunction(); // Lodash will make sure thie function is called only once in every 2 seconds    
  }
}
</script>

在Lodash docs 中查看更多信息。

【讨论】：