Firebaseから値を取得できるのを待ってから次の処理をしたい

Question

Firebaseで非同期に値を取得したいです。

現在、以下のようなコードを書いていて、まず snapshot.sizeでFirebase上の値をリッスンしてそれを取得できてから pushの部分で値をpushしたいです。
しかしこのままだと、db.collection ~部分で値を取得する前に blogs.pushの処理に行ってしまい、likeCountがundefinedになってしまいます。

    querySnapshot.forEach(doc => {
      db.collection('blogs').doc(doc.id).collection('likes').onSnapshot(snapshot => 
        snapshot.size
      )

      blogs.push({
        id: doc.id,
        created_at: new Date().getTime(),
        likeCount: ooo // ここにsnapshot.sizeで取得した値を入れたい
      })

足りない情報などあれば教えていただけると幸いです????‍♂️
ご教授お願いします????‍♂️

試したこと

以下のようにasync,awaitを加えてみましたがconsole上で[vuex] do not mutate vuex store state outside mutation handlers.エラーが出てしまいました

querySnapshot.forEach(async (doc) => {
      await db.collection('blogs').doc(doc.id).collection('likes').onSnapshot(snapshot => 
        snapshot.size
      )

      blogs.push({
        id: doc.id,
        created_at: new Date().getTime(),
        likeCount: ooo // ここにsnapshot.sizeで取得した値を入れたい
})

Answer 1

全体のコードが提示されていないので断定はできないですが、このコードはアクション内で実行されていると仮定して回答します。

第一に、Vuexの記述に問題があります。

[vuex] do not mutate vuex store state outside mutation handlers.のエラーメッセージが言っているように、ステートの値をミューテーション以外から変更することはできません。

質問内のコードでは、アクションから直接ステートを変更しようとしているためエラーメッセージが表示されています。

ステートの値を変更する際には必ずミューテーションを経由してください。

mutations: {
  add(state, blog) {
    state.blogs.push(blog)
  }
},
actions: {
  fetch({ commit }) {
    // 中略
    commit('add', {
      id: doc.id
      created_at: new Date().getTime(),
      likeCount: snapshot.size
    })
  }
}

次に非同期処理です。
そもそもquerySnapshotが非同期で処理されているかどうかわからないですが、断片的に判断すると次のようになると思います。

querySnapshot.forEach(async (doc) => {
  const snapshot = await db.collection('blogs').doc(doc.id).collection('likes').onSnapshot()
  commit('add', {
      id: doc.id
      created_at: new Date().getTime(),
      likeCount: snapshot.size
    })
})