Vue.js で ToDo アプリを作る

以前、PWA の学習を兼ねて、Firebase にデプロイしたアプリを PWA 化してみる計画を立てたのですが、対象のアプリがイマイチなので、その代わりに Vue.js で ToDo アプリを作りました。

今のところ ToDo のデータは LocalStorage に保存するようにしています。次回は Firebase Realtime Database に保存するようにしてみようかと。で、PWA のアプリとして Firebase にデプロイ。

ソースコードはこちら。

github.com

---

以下、備忘録。

環境構築

> vue init pwa todo-app
> cd todo-app
> npm install
> npm run dev

Vuex Plugins

ToDo データの永続化は Vuex の Plugins の仕組みを利用して、mutations に commit するタイミングで LocalStorage に保存する。

Vuex | プラグイン

あと、前からちょっと気になってたけど、actions に dispatch するタイミングでフックする仕組みはないだろうか...。

次にやること

Vuex の Plugins のところで、LocalStorage に保存しているところを Firebase Realtime Database を使うように差し替えられないか試してみる。