Question

Vue-如何使用 lodash debounce

2021-04-22

3976

javascript vue.js lodash

我正在使用从 lodash 导入的 debounce，它在 main.js 中

import lodash from 'lodash'
Vue.prototype._ = lodash

我正在使用 this._.find(...) ，一切运行正常。但如果我使用 debounce，它不起作用。

<script>
   export default {
      methods: {
        delay: this._.debounce(function () {
         // Code
        }, 500),
      }
    }
</script>

它抛出此错误 Uncaught TypeError: Cannot read property 'debounce' of undefined

使用 this._.debounce(...) 的正确方法是什么？

Answer 1

这应该可以工作

<script>
import { debounce } from 'lodash-es' // optimized es6-import package, similar to usual 'lodash'

export default {
  methods: {
    yourCoolFunction: debounce(function (event) { // event is the object parameter given to 'yourCoolFunction' if any
      // your tasty code
    }, 500),
  }
}

并且不要忘记将其添加到 nuxt.config.js 文件中

build: {
  transpile: ['lodash-es'],
}

有关什么是 debounce 的更多详细信息，您可以查看此文章： https://redd.one/blog/debounce-vs-throttle

Answer 2

尝试一下。对我来说，它的作用是 _.debounce ，如下所示：

<script>
       export default {
          methods: {
             delay: _.debounce(function() {
               //code
             }, 700),
          }
        }
    </script>