如何使用 vue.js 将简单数据保存在 firebase 中？答案

【问题标题】：How to save the Simple data in the firebase using vue.js?如何使用 vue.js 将简单数据保存在 firebase 中？
【发布时间】：2019-01-14 21:17:48
【问题描述】：

假设有两个字段包含一些文本，例如第一个文本字段包含字符串“Apple”，下一个文本字段将包含 Apple 的计数，假设计数的值为 10，并且在提交按钮上单击然后如何将数据发送到firebase数据库我用于保存电子邮件的代码和密码是：-

 <template>
  <div class="container">
   <div class= "row">
    <div class= "col-xs-12 co-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
     <h1>Http</h1>
      <div class="form-group">
      <label>Username</label>
      <input type="text" class="form-control" v-model="username">
    </div>
    <div class="form-group">
      <label>Mail</label>
      <input type="text" class="form-control" v-model="email">
    </div>
    <button class="btn btn-primary" @click="submit">Submit</button>
    </div>
   </div>
  </div>
 </template>

 <script>
   import firebase from 'firebase'
   var config = {
       apiKey: "]api_key",
       authDomain: "vuejs-http-11c9f.firebaseapp.com",
       databaseURL: "https://vuejs-http-11c9f.firebaseio.com",
       projectId: "vuejs-http-11c9f",
       storageBucket: "vuejs-http-11c9f.appspot.com",
       messagingSenderId: "Messaging_id"
    };
    firebase.initializeApp(config);
    export default {
    data() {
     return{
        username:'',
        email:''
     };
   },
   methods:{
    submit(){
      // console.log(this.user.email)
      firebase.auth().createUserWithEmailAndPassword(this.username, this.email)
     .then((result) => {
      console.log(result);
      }).catch((err) => {
         console.log(err)
      });
    }
  }
 }
</ script>

在上述程序中应该应用哪些更改，它将我的两个文本字段数据保存到 firebase 的数据库中。

Firebase 我正在使用我们 5.3.1。

【问题讨论】：

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

【解决方案1】：

要在 firebase 数据库中保存数据，您通常有两种选择。

1) Cloud Firestore（目前为测试版）

2) 实时数据库

由于 Cloud Firestore 处于测试阶段，如果您的应用即将投入生产，我建议您使用实时数据库。

因此，要使用实时数据库将其存储在 firebase 中，您首先需要创建如下所示的 firebase 数据库引用

const databaseRef = firebase.database();

之后使用这个引用来设置数据，如下所示

databaseRef.ref('fruitDetails/').set({
  fruitName: 'name of the fruit from text field',
  count: 'count from count text field'
});

如果您不想创建多个数据库，请确保在整个应用中使用相同的数据库引用。

【讨论】：