Firebase .on 与 Vue 不使用 Vuefire答案

【问题标题】：Firebase .on with Vue without using VuefireFirebase .on 与 Vue 不使用 Vuefire
【发布时间】：2018-03-12 16:56:02
【问题描述】：

我正在尝试与 Firebase 的 .on ref 实现实时连接，但不知道在哪里插入或在 Vue 中使用它。网上的教程都是用Vuefire来完成的，但是如果我只是想用Firebase SDK，在我的Vue项目中哪里可以激活这个.on连接，让它在双向数据连接中实时工作？

嗯.. 它似乎没有工作。这是我正在使用的，

export default {
    name: 'index',
    data() {
        return {
            id: '1234',
            meData: 'test'
        }
    },
    mounted() {
        const database = firebase.database().ref( 'rooms' + this.id );
        database.on( 'value', snapshot => {
            this.meData = snapshot.val();
        });
    }
}

我尝试使用 push 进行测试，它可以工作，因此配置和 firebase 工作正常，但 .on 似乎不起作用。我也没有错误，所以我很难找出问题所在。 =(

【问题讨论】：

需要使用斜杠才能访问：ref('/rooms/' + this.id);
我也尝试添加斜杠，但没有成功。但是我将其更改为 .push 并且可以正常工作。只是实时 .on 不起作用。 =(
我想在 Firebase 上查看您的数据库树。可以贴一下截图吗？
因为它只是用于测试，数据库atm中没有数据。 .push 工作后，我还删除了该节点以尝试 .on
.on 在您的数据库树中需要一个父分支。如果没有rooms，则无法观看。在使用.on之前，添加一些树来观看。

标签： firebase firebase-realtime-database vue.js

【解决方案1】：

首先，如果您需要使用 Vue.js 和 Firebase，最好的选择总是使用 VueFire。

但是，如果您想在没有 Vuefire 的情况下使用 Vue.js，您可以在组件的挂载部分中设置 firebase 实例。 Vue 组件的生命周期与没有 Vue 的不一样，所以最好使用 Vue 提供的生命周期处理器。

Vue.component("YourComponent", {
  ...

  mounted() {
    firebase.initializeApp({
      apiKey: "apiKey",,
      databaseURL: "https://databaseName.firebaseio.com"
    });

    const database = firebase.database();

    database.ref('/users/100').once('value').then((snapshot) => {
      // Do your business
    });

    ...

    //
    // You can also set up more handlers like above...
    //
  },

  ...
});

但是，如果要使用双向绑定，则有点困难。 Vuefire 的优点是它可以轻松混合 Vue 组件数据结构和 Firebase 实例。

没有Vuefire，我能想到的代码是这样的

Vue.component("YourComponent", {
  ...

  data() {
    return {
      users: []
    };
  },

  ...

  mounted() {

    //
    // Initialize Firebase SDK and get `database` to use below.
    //

    ...

    database.ref('/users').on('value', (snapshot) => {
      // By using arrow function, the context of `this` here is binded
      // into the current component data `users`.
      this.users = snapshot.val();
    });  
  },

  ...
});

【讨论】：

嗯.. 它似乎没有工作。这就是我正在使用的，export default { name: 'index', data() { return { id: '1234', meData: 'test' } },mounted() { const database = firebase.database().参考（“房间”+ this.id）； database.on('value', 快照 => { this.meData = snapshot.val(); });我尝试使用 push 进行测试，它可以工作，所以配置和 firebase 工作正常，但 .on 似乎不起作用。我也没有错误，所以我很难找出问题所在。 =(
我看不到你的源代码。你能编辑你的问题并添加你自己的代码吗？
在主要问题中更新。似乎无法编辑 cmets。

【解决方案2】：

如果其他人希望在没有 Vuefire 的情况下在 Vue 中使用 Firebase。

请观看此视频！

Vue 2 & Vuex & Firebase 教程 - 让它们一起工作

https://youtu.be/niPgyv53x8c

【讨论】：