Vue.js กับ Firebase ที่เหมือนจะง่าย แต่ไม่ง่ายเลยนะครับ…

พอดีว่าจะทำ Application สำหรับงาน Google I/O Extend Bangkok คราวนี้มันต้องใช้ Firebase กับ Vuejs ก็เลยคิดว่ามันต้องมีสิ component ที่ทำให้ vue ต่อ firebase ได้เนียนๆ ก็เลยไปเจอกับ vuefire ตอนนั้นก็คิดในใจว่ารอดและสบาย แต่พออ่านๆไป รวมถึงนั่งดู Example แล้วก็พึ่งสังเกตุได้ว่า

นี่มันเอาไว้ใช้กับ Component เดียวนี่หว่า ไม่ใช่ทั้ง App แล้วมันจะใช้กับ vue-cli ยังไง…..

คราวนี้ก็เลยไปไล่ดูเลยครับว่าจะใช้กับทั้ง App ยังไงก็ไปเจอ วิดิโอที่มีคนทำเอาไว้ แต่ปัญหาคือ ทั้ง App เค้าใช้ Firebase อยู่ Component เดียว

ทำไมต้องต้องสนใจกับ การใช้ทั้ง App?

ใน Example เนี่ย มันมีแค่ Component เดียวที่ใช้ Firebase ครับ แต่ของผมมี 4 Component และ Firebase เนี่ย ในหน้าเว็บเดียวกันมันประกาศ initializeApp มากกว่าหนึ่งอันไม่ได้ครับไม่งั้นมันจะแจ้งว่า duplicate ซึ่งมันจะเริ่มยากขึ้นมาหน่อยและ

เข้าใจก่อนว่า Vuefire ทำงานยังไง

สิ่งที่ vuefire ทำ vuefire ไม่ได้สร้าง Instance ของ Firebase ขึ้นมาในตัวเอง แต่ vuefire ทำหน้าที่ map state เข้ากับ Firebase reference เท่านั้น โดยที่ vuefire จะ map ตัว ref ของเราให้กลายเป็น Array หรือ Object แล้วแต่เรากำหนด

แล้วไงต่อ??

คราวนี้ หลังจากที่เรารู้แล้วว่า vuefire ทำหน้าที่แค่ตรงไหน สิ่งที่เราต้องทำคือ เรียกใช้ vuefire ที่ component บนสุด แล้วให้มันส่ง state ที่ map กับ firebase แล้ว ลงไป ตาม prop เรื่อยๆ

ดู code กันดีกว่า

ก่อนอื่น เราก็ import vuefire ที่ main.js และ use มัน

import VueFire from ‘vuefire’
Vue.use(VueFire)

หลังจากนั้นก็ไปที่ Component บนสุด ซึ่งถ้าสร้างจาก vue-cli มันคือ App.vue แล้ว import Firebase เข้ามา อย่างที่ผมบอกครับมันไม่ได้ สร้าง Firebase instance ให้ เราต้องสร้างเอง โดย code ก็จะประมาณนี้ สิ่งที่เพิ่มมานอกจาก compoment ปกติคือ property firebase ที่ต้องกำหนดว่าจะ map ref ไหน เข้ากับ state ไหน

import Firebase from 'firebase'

var firebaseApp = Firebase.initializeApp({
databaseURL: 'https://xxxxxxxxxxxxxx.firebaseio.com',
})
var db = firebaseApp.database()

export default {
  name: 'MainFeed',
  components: { OnlineUser, Stream, FbLive },
  firebase: {
    msg: {
      source: db.ref('msg').limitToLast(50),
      // optionally bind as an object
      asObject: false
    },
    users: db.ref('online-user'),
    liveVideos: db.ref('live').limitToLast(1)
  }
}

จาก code ข้างบนหลังจากนี้เราก็สามารถเรียกใช้ this.msg หรือ this.users ได้เลยซึ่ง ถ้าจะใช้ใน component ไหน ก็ต้องส่งผ่าน props ไป ผมลอง initializeApp แยก component แล้วแต่ไม่รอดครับ firebase ฟ้องทันทีว่า duplicate initialize

ถ้า Firebase update แล้ว component จะ update ไปด้วยใช่มั้ย?

“ใช่ครับ” “ใช่ที่สุด!” “ใช่แบบโคตรใช่!!” แต่มันมีรายละเอียดอยู่นิดนึงครับ ถ้าเรา map เป็น Array ตัว vuefire จะไปใช้ event กลุ่ม child_* แต่ถ้า map เป็น object มันจะใช้เป็น event ‘value’ นะครับ

กว่าจะหาวิธีดีๆได้นี่วุ่นวายเอาเรื่องแต่พอมาขียนเป็นบล็อกดูมันไม่ค่อยมีอะไรเลย….

แต่ก็ลองเอาไปเล่นดูครับถ้าใครกำลังจะทำ app ด้วย vuejs + firebase เจ้า vuefire ถือว่าเป็นอะไรที่ควรใช้ครับ ไม่ใช่อะไรนะครับเพราะว่าถ้าทำเอง โคตรวุ่นวายครับแล้วเหมือนถ้าทำเองจะเจอปัญหา firebase ส่งค่าออกมา update state ผิดด้วย นั้นใช้เถอะครับได้สบายๆ

https://github.com/vuejs/vuefire/