Blog

Firebaseサブコレクション配下にあるdocumentを一覧に表示する

目的物

子のコンポネントにわたす

<tmp-user-table
    v-if="tmpUsers"

//子要素に渡す
   :users="tmpUsers">
</tmp-user-table>

サブコレクションを取得

export default class AccountsPage extends Vue {
  userInfo: AppUser | null
  tmpUsers: AppTmpUser[] = null
  tmpUsersSubscription: Subscription = null


//createのタイミングでサブスクライブしたもの(userinfo)が取得できなかったのでWatchする
  @Watch('userInfo', { immediate: true })
  watchUserInfo() {
    if (!this.userInfo) return

//accountUseCaseにactionとmutationを記載している
// tmpUsersSubscription =>リアクティブにgetする
    this.tmpUsersSubscription = this.$deps.accountUseCase

//authの後なのでidを持っている それと送付したemailを突き合わせてgetする
      .getTmpUsersByEmail(this.userInfo.id, this.userInfo.email)
      .subscribe((tmpUsers) => {

//表示用のプロパティに詰め込む
        this.tmpUsers = tmpUsers
      })
  }

リアクティブありきで考えると、多少難易度が上がるイメージ

actionの中からactionを呼び出すなど、美しくないコードになってしまった。

ネストしているのはなんとなく気持ち悪い。

リファクタも必要。

だけど、完璧より、完成を目指したい。

ご連絡、質問は、Facebook よりお願いいたします。