LoginSignup
17

More than 5 years have passed since last update.

vue-cliでLodashのdebounceを使う方法

Posted at

やりたかったこと

debounce_2.gif

vue.js (vue-cli) で作っているSPAで、textareaが編集されたら最後の編集から数秒後に保存の処理を実行する。


『基礎から学ぶVue.js (通称「猫本」)』を見てみると、Lodashのdebounceを使うと実現できるとのこと。
>基礎から学ぶVue.js - サポートページ

こちらを参考にvue-cliで実現した方法をまとめます。

Lodashをnpmでインストールする

Lodash公式ページに書いてあるコマンドを実行します。

$ npm i --save lodash

Lodashをインポートする

vue
<script>
import _ from 'lodash'

export default {
// ~ 中略 ~
}
</script>

Lodashを使用するvueファイルのscriptの先頭でインポートします。

CDNを利用してLodashにアクセスする時は _ (アンダースコア) を使うので、それに倣ってimport名も _ にしました。jQueryで $ を使うような感じみたいです。

このインポートのやり方がググっても中々出てこなくて苦労しました。。

debounceを使う

vue
<script>
import _ from 'lodash'

export default {
// ~ 中略 ~
  data() {
    return {
      memos: [
        {
          markdown: ""
        }
      ]
  },
  watch: {
    memos: {
      handler: _.debounce(function() {
        this.saveMemos(); // 実行したい処理
      }, 2000), // memosのデータの更新が終わった2秒後に実行される
      deep: true
    }
  },
// ~ 中略 ~
};
</script>

watchオプション内のコードは猫本のサポートページに書いてあるのとほとんど同じです。

それに加えて、ネストされたオブジェクトも監視するオプション「deep」と、handlerプロパティを使っています。textareaのデータをmemos内のmarkdownに保存しているためです。

これでやりたいことができました…!

参考文献

Lodashとは?

・Lodashで配列処理

・細かすぎるけど伝わって欲しいlodash.jsの話 (KAYAC engineer's blog)

debounceとは?

・debounce とは (slideship)

・lodash の debounce や throttle で簡単に負荷対策 (Qiita)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17