既然使用vueJs, 我們可以把vue和firebase結合在一起嗎？答案是可以的, 雖然firebase官方只出AngularJs的套件 AngularFire (google大大), 但我們尤雨溪大大也不是省油的燈, 也自作了一套 VueFire , 我們就來實際操演一次
<head>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/4.8.0/firebase.js"></script>
<!-- VueFire -->
<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
</head>
npm install vue firebase vuefire --save
使用CDN 的話, firebase 一樣在 index.html init就可以了, 不過這次我選擇用 npm 安裝, 所以我們在 Hello.vue 這邊 init
import Vue from 'vue'
import VueFire from 'vuefire'
import firebase from 'firebase'
Vue.use(VueFire) // Install VueFire
const firebaseApp = firebase.initializeApp({
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "",
messagingSenderId: "..."
})
const DB = firebaseApp.database()
export default {
components: {
QBtn,
QInput
},
data() {
return {
name: '',
age: ''
}
},
firebase: {
users: DB.ref('users').limitToLast(6)
},
...
Devtools tool 可以看到, VueFire 已經幫我們綁定資料, 並且轉為 Array, 也幫你把 firebase 自帶的key值帶到裡面的物件, 而且還有資料過濾(query)！ 這就是 VueFire 的 Array Bindings
所以直接loop出來看看吧
<div>
<div v-for="item in users">
{{item.name}}, {{item.age}}
</div>
</div>
另外, 如果要綁定物件的話也是可以的
firebase: {
anObject: {
source: db.ref('url/to/my/object'),
asObject: true,
//如果需要cancelCallback的話
cancelCallback: function () {},
//如果有需要readyCallback的話
readyCallback: function () {}
}
}
今天介紹的是讀取和綁定DB, 明天會介紹寫入DB
iThome鐵人賽
看影片追技術