Vue.js Firebase 与 VueFire 的集成

Firebase 是建立托管实时数据库的最无痛的方式之一。 VueFire通过 Vue 的反应系统提供直接地图和更新,使生活更容易。

使用

在 Vue.js 项目中安装firebasevuefire,通过 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 文件中找到更多信息和文档。

Published At
Categories with 技术
Tagged with
comments powered by Disqus