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

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

やりたかったこと

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)