Firebase 是建立托管实时数据库的最无痛的方式之一。 VueFire通过 Vue 的反应系统提供直接地图和更新,使生活更容易。
使用
在 Vue.js 项目中安装firebase和vuefire,通过 NPM 或 Yarn。
1yarn add firebase vuefire
1npm install firebase vuefire --save
然后,在应用程序的主要文件中,启用VueFire插件。
1[label main.js]
2import './firebase';
3
4import Vue from 'vue';
5import VueFire from 'vuefire';
6import App from 'App.vue';
7
8Vue.use(VueFire);
9
10new Vue({
11 el: '#app',
12 render: h => h(App)
13});
我们还需要启动Firebase连接,创建一个名为firebase.js的新文件。
1[label firebase.js]
2import Firebase from 'firebase'
3
4const firebaseApp = Firebase.initializeApp({
5 // Populate your firebase configuration data here.
6 ...
7});
8
9// Export the database for components to use.
10// If you want to get fancy, use mixins or provide / inject to avoid redundant imports.
11export const db = firebaseApp.database();
现在,我们可以直接从 Vue 组件访问我们的 Firebase 数据库中的数据。
1[label App.vue]
2<template>
3 <p v-for="user of users">
4 {{user.name}}
5 </p>
6</template>
7<script>
8import {db} from './firebase';
9
10export default {
11 data() {
12 return {
13 users: {}
14 }
15 },
16
17 firebase: {
18 users: {
19 source: db.ref('users'),
20 // Optional, allows you to handle any errors.
21 cancelCallback(err) {
22 console.error(err);
23 }
24 }
25 }
26}
27</script>
每当用户收集更新时,用户数据对象也会在客户端上更新。
数据变更
您可以在「this.$firebaseRefs」(即「this.$firebaseRefs.users.push({name: 'Tom Bombadil'})」))中正常修改数组)。
不幸的是,修改对象可能有点麻烦,这必须通过直接使用 firebase ref 手动完成。
1updateUserName(user, newName) {
2 this.$firebaseRefs.users.child(user['.key']).child('name').set(newName);
3}
4
5removeUser(user) {
6 this.$firebaseRefs.users.child(user['.key']).remove()
7}
您可以在 VueFire 存储库和 Firebase 文件中找到更多信息和文档。