構建和處理包含跨對象 ID 引用的 Firebase 實時數據庫的數據的最佳實踐

Question

背景：Nuxt SPA 與 TypeScript。 連接到 Firebase 實時數據庫。 我的 Firebase 實時數據庫中有四個數據對象。 它們包含彼此的 ID 引用。 例如，讓我們看一下其中三個數據對象的設計。

"projects":
  {
    "p1" : 
      {
        "projectTeam": {
          "0": "t1",
          "1": "t2",
          "2": "t3",
        },
        "courseId" : "c1",
        "objective": "The objective of the project",
        "someOtherKey": "withSomeValue"
      }
  }

"courses":
  {
    "c1" : 
      {
        "name" : "The name of course A",
        "someOtherKey": "withSomeValue"
      },
    "c2" : 
      {
        "name" : "The name of course B",
        "someOtherKey": "withSomeValue"
      }
  }

"teamMembers" :
  {
    "t1" : 
      {
        "name": "John",
        "expertise": "Some expertise"
      },
    "t2" : 
      {
        "name": "Jane",
        "expertise": "Some other expertise"
      },
    "t3" : 
      {
        "name": "George",
        "expertise": "Some other expertise"
      }
  }

目標：在我的 SPA 中呈現數據之前，我需要“解決”所有數據引用。 換句話說，我試圖得到，例如：

"projects":
  {
    "p1" : 
      {
        "projectTeamNames": {
          "0": "John",
          "1": "Jane",
          "2": "George",
        },
        "courseName: "The name of course A",
        "objective": "The objective of the project",
        "someOtherKey": "withSomeValue"
      }
  }

嘗試：在beforeMount()生命周期鈎子內從 Firebase 獲取所有四個數據對象，並在之后立即解析引用（仍在鈎子內）。

beforeMount () {
  let  projects = []
  const courses = []

  {
    const REF = this.$fire.database.ref( 'projects' )
    REF.on( 'child_added', snapshot => {
      projects.push({ id: snapshot.key, ...snapshot.val() })
    })
  }
  {
    const REF = this.$fire.database.ref( 'courses' )
    REF.on( 'child_added', snapshot => {
      courses.push({ id: snapshot.key, ...snapshot.val() })
    })
  }

  const getCourseName = project => {
    const course = courses.find( course => course.id === project.courseId )
    return course.name
  }

  projects = projects.map( project => (
    {
      ...project,
      courseName: getCourseName(project)
    }
  ))

  // Some more handling of ID references

  this.projects = projects

}

盡管這種方法不會引發任何錯誤，但如果我使用{{ projects }}在 DOM 中渲染項目，則渲染的數據 object 沒有屬性courseName 。

我一直在努力處理與 Firebase 實時數據庫結合使用的這些 ID 引用，並且我可以使用一些關於如何編碼的見解——尤其是如何根據良好實踐進行編碼。 我的頭腦想知道駭人聽聞的解決方案，但我想學習正確的前進方式。

我想遵循官方建議以避免嵌套在數據對象中，但看不到如何解析 ID 引用。

Answer 1

我不確定我是否完全理解這個問題，但有一些一般性觀察：

• 您似乎在扁平化數據結構方面做得不錯。 乍一看，我所做的只是將projectTeam從每個項目中取出並使其成為頂級列表（以項目 ID 作為鍵），這樣您就可以在沒有團隊的情況下加載項目詳細信息，反之亦然。

• 我可能會使用on('value') （或once('value'或get() ）而不是on('child_added'因為這樣更容易控制流程（您通常會處理多個child_added啟動時的事件，使用once('value'或get()您將一次性獲取所有數據）。

• 偵聽完整的值事件意味着您可以用從數據庫中獲取的內容替換現有的projects和courses數組內容。

• 如果您繼續處理child_added ，請考慮是否還應該處理其他child_事件類型。