最近にわかに盛り上がっているのがPWA(Progressive Web App)です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。
何回かに分けて、mBaaSを使ったPWAを作っていきます。前回のベースアプリに続いて、今回はタスク管理アプリとして完成させます。
更新処理の追加
タスク管理での更新と言えば、タスクを完了にする処理だと思います。そこでチェックボックスをチェックしたタイミングでステータスを完了(done)にします。
<ul v-for="task in tasks" :key="task.objectId"> <li> <input type="checkbox" v-model="task.done" @click="done(task, $event)" v-if="task.status == 'active'"/> {{ task.text }} </li> </ul>
この時のイベント、doneを作ります。
async done(task, event) { const checked = event.target.checked; await task .set('status', checked ? 'done' : 'active') .update(); await this.fetch(); },
this.fetchはリストを更新する処理です。初期表示処理、タスクの追加、削除などでも同様に呼び出します。
async fetch() { const tasks = await Task .equalTo('status', this.status) .fetchAll(); Vue.set(this, 'tasks', tasks); },
ステータス(this.status)はdataの中で定義します。デフォルトは active です。
data() { return { tasks: [], task: { text: null }, status: 'active' } },
表示の切り替え
ステータスを完了(done)にしたデータも見られるように、ステータスを切り替えられるようにします。
<ul> <li v-if="status == 'active'"> <strong>アクティブ</strong> </li> <li v-else> <span @click="changeStatus('active')">アクティブ</span> </li> <li v-if="status == 'done'"> <strong>完了</strong> </li> <li v-else> <span @click="changeStatus('done')">完了</span> </li> </ul>
このchangeStatusのイベントでは this.status を変更し、 this.fetch でリストを更新します。
async changeStatus(status) { this.status = status; this.fetch(); },
これだけでアクティブ、完了の一覧を切り替えられるようになりました。
タスクを削除する
ステータスが完了(done)になっているデータは削除できるようにします。一覧表示を少し変更します。
<ul v-for="task in tasks" :key="task.objectId"> <li> <input type="checkbox" v-model="task.done" @click="done(task, $event)" v-if="task.status == 'active'"/> {{ task.text }} <!-- 追加 --> <span v-if="task.status == 'done'" @click="destroy(task)"> (削除)</span> </li> </ul>
そしてdestroyイベントを作ります。タスクを削除し、リストを更新します。
async destroy(task) { await task.delete(); await this.fetch(); }
ここまでの処理でタスクの追加、更新、削除が完了しました。タスク管理としての最低限の機能は実装されています。
まとめ
タスク管理としての基本機能はできました。しかし、これではオフライン時の対応はできていません。次回から実際にデータをオフライン化対応させていきます。
ここまでのコードは NCMBMania/PWA-NCMB at v2 にアップロードしてあります。実装時の参考にしてください。