iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

我或許沒那麼懂 Web系列 第 29

Cloud Firestore β (21): 監聽變動 2

今天來研究如何一次追蹤一個集合中多個文件的變動、針對不同的變動做出不同的對應、以及如何取消追蹤吧!

若是要追蹤一個集合中的多個文件,可以透過 query 相關方法去篩選文件,最後用 onSnapshot() 取代原本要獲取資料的 get(),其實這部份就和昨天提到的文件變動追蹤是大同小異的,所以簽署式也是一樣的,差別只在 OnNext() 回呼函式拿到的是 QuerySnapshot,不是 DocumentSnapshot

onSnapshot(optionsOrObserverOrOnNext, observerOrOnNextOrOnError, onError) returns function()

這邊以要追蹤行政區集合中,所屬城市是台中的所有行政區為例:

db.collection('districts').where('city', '==', 'Taichung')
  .onSnapshot(querySnapshot => {
    let districts = []
    querySnapshot.forEach(doc => {
      districts.push(doc.data().name)
    })
    console.log('Current districts in Taichung: ', districts.join(', '))
  })

QuerySnapshot 有提供一個名為 docChanges() 的方法用來追蹤文件變動,它會回傳由 DocumentChange 物件組成的陣列,我們可以透過其中的 type 屬性來暸解變動的類別是新增、更新、還是移除,透過這些資訊我們就可以針對不同的變動類型做出不同的對應方式。若是 onSnapshot() 方法是第一次執行,那麼變動的類型都會是 added

db.collection('districts').where('city', '==', 'Taichung')
  .onSnapshot(querySnapshot => {
    snapshot.docChanges().forEach(change => {
      if (change.type === 'added') {
        console.log('New district: ', change.doc.data())
      }
      if (change.type === 'modified') {
        console.log('Modified district: ', change.doc.data())
      }
      if (change.type === 'removed') {
        console.log('Removed district: ', change.doc.data())
      }
    })
  })

最後來講講該如何取消追蹤變動,其實方法很簡單。當我們在呼叫 onSnapshot() 方法時,它會回傳一個函式,該函式就是取消追蹤的函式,所以我們可以在呼叫 onSnapshot() 時,將其回傳的值記錄下來。

let unsubscribe = db.collection('districts')
  .where('city', '==', 'Taichung')
  .onSnapshot(querySnapshot => { /* ... */ })

// ...
// 停止追蹤變動
unsubscribe()

上一篇
Cloud Firestore β (20): 監聽變動 - 1
下一篇
Vuefire: Vue.js + Firebase
系列文
我或許沒那麼懂 Web31

尚未有邦友留言

立即登入留言