接續昨天的資料存取

更多時候我們需要一個清單的資料類型, 先改良一下目前的程式碼

<div style="max-width:60vw;margin:0 auto;">
  <q-input v-model="name" stack-label="name" />
  <q-input v-model="age" stack-label="age" />
  <q-btn color="red" @click="set">送出</q-btn>
</div>

beforeCreate() {
  window.DB_USERS = firebase.database().ref('users')
},

set() {
  let {name, age} = this;
  DB_USERS.push({ name, age }).catch(error => {
    console.error("寫入使用者資訊錯誤", error);
  });
},

name 輸入 andy, age 輸入 87, 可以發現資料已經被存入 users, 並且 firebase 幫我們加了一層時間雜湊的 Unique Key

firebase 的監聽事件

進入Realtime base 的重點, 我們可以對database進行監聽, 觀察資料的變化, 這點搭配VueJs的 data binding, 會幫我們實現非常多強大的功能, 我們在 mounted() 裡實作他, 共有五種事件：

1. Value
2. Child Added
3. Child Changed
4. Child Removed
5. Child Moved

只要 DB_USERS 有新的資料存入, 就會印出資料！

mounted() {
  DB_USERS.on('child_added', snapshot => {
    console.log(snapshot)
  });
}