javascript - 如何为 firebase 配置 nativescript-vue 应用程序？

Question

我用 nativescript-vue 制作了我的第一个应用程序，并且想知道如何将 firebase 连接到我的应用程序。我的想法是从实时 Firebase 数据库中添加和读取数据。

我按照一些指南进行了以下操作：
1）我使用命令安装了firebase：“tns plugin add nativescript-plugin-firebase”。
2) 然后我从我的 firebase 项目中配置并下载了 google-services.json 文件。

这是 main.js 文件的内容。

import Vue from 'nativescript-vue'
import App from './components/App'
import firebase from 'nativescript-plugin-firebase'

import VueDevtools from 'nativescript-vue-devtools'

if(TNS_ENV !== 'production') {
  Vue.use(VueDevtools)
}
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')

firebase
  .init()
  .then(() => console.log('Firebase initialised!'))
  .catch(error => console.log(`Error: ${error}`));

new Vue({

  render: h => h('frame', [h(App)])
}).$start()

这是 App.vue 文件的内容。

<template>
    <Page>
        <ActionBar title="App demo"/>
        <GridLayout columns="*" rows="*">
            <Label class="message" :text="msg" col="0" row="0"/>
        </GridLayout>

        <button @tap="test()">Push</button>
    </Page>
</template>

<script>
import firebase from 'nativescript-plugin-firebase';

  export default {
    data() {
      return {
        msg: 'Hello World!'
      }
    },
    methods: {
      test(){
        alert("click");
        //FIREBASE PUSH 
    }
    }
  }
</script>

<style scoped>
    ActionBar {
        background-color: #1F2327;
        color: #ffffff;
    }

    .message {
        vertical-align: center;
        text-align: center;
        font-size: 20;
        color: #333333;
    }
</style>

我尝试使用此代码，但它不起作用。

 firebase.push(
      '/users',
      {
        'first': 'Eddy',
        'last': 'Verbruggen',
        'birthYear': 1977,
        'isMale': true,
        'address': {
          'street': 'foostreet',
          'number': 123
        }
      }
  ).then(
      function (result) {
        console.log("created key: " + result.key);
      }
  );

标签： javascriptandroidvue.jsfirebase-realtime-databasenativescript-vue