iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
1

接續昨天的資料存取

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

<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
https://ithelp.ithome.com.tw/upload/images/20171219/201073790GmVMHewoC.png

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)
  });
}

上一篇
Firebase intro. (2/4
下一篇
Firebase intro. (4/4
系列文
GAME30天30

尚未有邦友留言

立即登入留言