Nuxt.js + Firebase で動的に初期データを追加する
新規ログインしたユーザに対して初期データを追加したい場合がある。
やり方
- 初期データ登録用のメソッド
setDefaultData
を store の actions に定義する。 - データを表示する page で
setDefaultData
を呼び出す
setDefaultData の定義
setDefaultData
では対象のデータを検索して1件も存在しない場合に予め定義しておいた初期データ default_data
を firestore の I/F add
を呼び出して登録する。
id は firestore に登録時に自動付与されるので初期データには含めない。
store/projects.js
const default_data = [ { name: 'My First Project', order: 0 }, { name: 'My Second Project', order: 1 } ] export const actions = { : setDefaultData: (context, payload) => { // 対象データを検索 projects .where('userId', '==', payload.userId) .get() .then(querySnapshot => { if (querySnapshot.size == 0) { // データが存在しなければ初期データを追加する default_data.forEach(data => { projects.add({ ...data, userId: payload.userId }) }) } }) }, : }
setDefaultData の呼び出し
呼び出し側は、データを表示する page の created あたりで setDefaultData
を呼び出す。
追加した初期データは vuexfire のデータバインディングによって自動的に store と同期される。
pages/projects/index.vue
created() { : this.$store.dispatch('projects/setDefaultData', { userId: this.user.uid }) : },