Vue and Firebase: Prevent some `data` from being saved to Firebase

Question

I have a component that gets synced to Firebase. I want instances of the component to have some properties that do not get synced to Firebase:

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

title should be saved to the database, but isShown should not since it's used just to show and hide the element in the browser.

Is there a way of adding reactive properties to a component instance without them being synced to Firebase?

Answer 1

Only firebase data references are synced to Firebase. Entries in the data object will be reactive within Vue, but will not by default be synced to the server. Component properties may be firebase references or plain clientside data objects, depending on what the parent component passed down in the prop.

Some examples:

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 
}