volpe’s diary

フリーランスじゃなくなったプログラマ volpe が日々便利だなぁと感じたことを中心に綴るブログです

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
    })

               :
  },