javascript - How to import a single Lodash function in a VueJs project? - Stack Overflow

admin管理员组

文章数量:1417974

I am trying to import the debounce function in my VueJs project.

I ran: npm i --save lodash.debounce

Then I imported it in my project with: import { debounce } from 'lodash/debounce'

And tried using it with:

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

I also tried importing it as import debounce from 'lodash/debounce', but whatever I do I cannot get it to work.

I read this stack post but that also doesn't seem to work: How to Import a Single Lodash Function?

Anyone knows how to do this?

Thanks.

I am trying to import the debounce function in my VueJs project.

I ran: npm i --save lodash.debounce

Then I imported it in my project with: import { debounce } from 'lodash/debounce'

And tried using it with:

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

I also tried importing it as import debounce from 'lodash/debounce', but whatever I do I cannot get it to work.

I read this stack post but that also doesn't seem to work: How to Import a Single Lodash Function?

Anyone knows how to do this?

Thanks.

• javascript
• node.js
• vue.js
• vuejs2
• lodash

Share Improve this question Follow asked Nov 6, 2020 at 10:51 Reinier68Reinier68 3,35433 gold badges3636 silver badges6767 bronze badges 7

• 1 import debounce from 'lodash.debounce' – Shaya Ulman Commented Nov 6, 2020 at 11:05
• Tried that aswell @ShayaUlman. But how do I actually use it in my code? Because the code example that I gave does not run or gives me errors... – Reinier68 Commented Nov 6, 2020 at 11:06
• What are the errors? are you sure it eas correctly installed? – Shaya Ulman Commented Nov 6, 2020 at 11:07
• If I use this.debounce() the error is: this.debounce is not a function, if I just use debounce() the error is "TypeError: Object(...) is not a function". I installed it correctly because it is declared in my package.json as a depencency: ` "lodash.debounce": "^4.0.8",` – Reinier68 Commented Nov 6, 2020 at 11:12
• 1 I tested a few different possibilities, and now it prints: ƒ debounce(func, wait, options) { var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false Which leads me to think that I now imported it properly? It still doesn't log anything tho when the method is called. – Reinier68 Commented Nov 6, 2020 at 11:26

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 8

The issue is not with importing a single Lodash function,debounce just returns a function (a new version of the original passed function). To call the original function you need to invoke the function that debounce returns.

This is probably what you want:

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

export default {
  // ...
  methods: {
    origFunction() {
      console.log('I only get fired once every two seconds, max!');      
    },
  },
  puted: {
    // Create a debounced function
    // As it is a puted 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>

See more in the Lodash docs.

本文标签： javascriptHow to import a single Lodash function in a VueJs projectStack Overflow