Vue 和 Firebase：防止将某些“数据”保存到 Firebase答案

【问题标题】：Vue and Firebase: Prevent some `data` from being saved to FirebaseVue 和 Firebase：防止将某些“数据”保存到 Firebase
【发布时间】：2017-06-20 08:37:54
【问题描述】：

我有一个与 Firebase 同步的组件。我希望组件的实例具有一些不同步到 Firebase 的属性：

Vue.component('myComponent', {
    data: function(){
        return {
            title: '',
            isShown: false
        }
    }
});

title 应该保存到数据库中，但 isShown 不应该，因为它只是用来在浏览器中显示和隐藏元素。

有没有一种方法可以在不同步到 Firebase 的情况下向组件实例添加响应式属性？

【问题讨论】：

只是猜测，但ref.set({ title: this.title }) 怎么样？如果不了解您如何“同步”到 Firebase，就无法提供更多内容
除了title之外还有相当多的属性，所以这看起来不是很干。
我正在使用Vuefire。
我不知道 Vuefire 中所有组件 data 的任何自动同步。你的代码在哪里？

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

【解决方案1】：

只有 Firebase 数据引用会同步到 Firebase。 data 对象中的条目将在 Vue 中响应，但默认情况下不会同步到服务器。组件属性可能是 firebase 引用或普通客户端数据对象，具体取决于父组件在 prop 中传递的内容。

一些例子：

var firebaseApp = firebase.initializeApp({ ... });
var db = firebaseApp.database();

Vue.component('myComponent', {
  data: function() {return {
    foo: true,                      // <-- 'foo' will not be synced
  }},
  firebase: function() {return {    // (vuefire hook)
    bar: db.ref('path/to/bar')      // <-- 'bar' will be synced
  }},
  mounted: function() {return {
    this.$bindAsArray('baz',db.ref('path/to/baz')) // <-- 'baz' will be synced
    // ($bindAs is also from vuefire)
  }},
  props: [qux] // <-- depends on what the parent component passed down 
}

【讨论】：