javascript - 如何在 VueJs 项目中导入单个 Lodash 函数？

Question

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

我跑了：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'，但无论我做什么，我都无法让它工作。

我读了这篇堆栈文章，但这似乎也不起作用：如何导入单个 Lodash 函数？

任何人都知道如何做到这一点？

谢谢。

标签： javascriptnode.jsvue.jsvuejs2lodash

Answer 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 文档中查看更多信息。