Vue.jsを再入門する 3

前回記事

luca3104.hatenablog.com

今回はLocalStorageを使用し、データの永続化を実装します。

LocalStorageとは

HTML5から導入されたWebStorage APIです。
ブラウザに組み込まれたデータベースと言うとわかりやすいかもしれません。
今回はToDoの一覧を永続的に保存したいけどサーバーまで実装する必要ないと言うことで使って行きたいと思います。

vue-ls

Vue.jsでLocalStorageを楽に使用するためにvue-lsというプラグインを使用します。

github.com

npm install vue-lsでインストール後、main.js内に

import VueLocalStorage from 'vue-ls'

Vue.use(VueLocalStorage)

と記述し使用します。

保存する

localStorage.setItem('task', JSON.stringify(this.tasks))

これだけで実装終わりです。

セットする

このままだと再読み込みなどをしたときに表示されません。
export default内に mounted()を定義し、読み込み時の動作を指定します。
今回は取得して表示するだけなので以下のようになります。

  mounted() {
    this.tasks = JSON.parse(localStorage.getItem('tasks')) || []
  },

完了時もセットする

完了時にも保存します。 考え方的にはtasksを常に監視して、変更があった場合保存するようにします。 ここでwatchを使用します。

jp.vuejs.org

今回はオブジェクト内にネストされた値の変更を検知するために上リンクのcのパターンを利用します。

  watch: {
    tasks: {
      handler: function(){
        this.storeTasks()
      },
      deep: true,
    }
  },

これで完了時にも保存されます。
このあとに実装する編集後にも保存されるのでこのwatchはとても便利ですね。

実際に動作を見てみましょう。
入力 → 完了 → リロードをしてみます。

(リロードがとてもわかりづらいですが、カクッとなってる時がリロード時です)

次回

次回は編集・削除機能をつけてこのシリーズを終わらせたいと思います。