Vue.js + Firebase +TypeScript ͰϦΞϧλΠϜνϟοτnunulk#ReBuildCamp
View Slide
Firebase• Google ͕ఏڙ͢Δ mBaaS• Cloud Firestore (Beta), Cloud Storage,Cloud Functions, A/B Testing, CloudMessaging
ٕͬͨज़• Vue.js: 2.5.22• TypeScript: 3.2.4• Firebase: 0.3.7• Element: 2.4.11
ೝূ͕ඞཁͳύεͷࢦఆroutes: [{path: '/',name: 'home',component: Home,meta: { requiresAuth: true }},
ϛυϧΣΞrouter.beforeEach((to, from, next) => {const requiresAuth = to.matched.some(record =>record.meta.requiresAuth)if (!requiresAuth) {next()} else {firebase.auth().onAuthStateChanged(function (user) {if (user) {next()} else {next({path: '/signin',query: { redirect: to.fullPath }})
Componentexport default class ChatBoard extends Vue {user: User = { id: null, email: '', avatar_image_url: '' }participants: User[] = []messages: Message[] = []message: Message = { room_id, sender_id: null, content: ‘', created_at: null, }
Componentcreated(): void {const fireUser = firebase.auth().currentUser;if (!fireUser) {return;}this.user.id = fireUser.uid;this.user.email = fireUser.email;db.collection('users').doc(this.user.id).get() .then((doc) => {})
Componentdb.collection('messages').onSnapshot((snapshot) => {const changes = snapshot.docChanges()if (!changes) {return}changes.forEach((change) => {if (change.type === 'added') {const message = {room_id: change.doc.data().room_id,sender_id: change.doc.data().sender_id,content: change.doc.data().content,created_at:this.timestamp2String(change.doc.data().created_at)};this.addMessageData(message);}
σϞ