Writing to the database

As said in the introduction, Vuexfire does not handle writing data back to Firebase because you can directly use the Firebase JS SDK to precisely update whatever you need. Here are some examples on how to create, update and remove documents but make sure to refer to the official documentation to go further:

The main point here is wrapping writes in actions. This is not mandatory but can vastly improve your testing experience as you may not need to mock Firebase database at all if you mock your Store in components with something like vuex-mock-store (opens new window).

Updates to collection and documents

There are two ways to update a document set and update. The first will replace the whole document (as a PUT in HTTP) while the later will keep the original document and overwrite values (as a PATCH in HTTP).

TIP

In the following examples, user is a user bound to a Firebase document using Vuexfire while conferences is a list of conferences bound to a Firebase collection using Vuexfire.

We are also omitting the whole store declaration but still calling firestoreAction/firebaseAction to create the action. Note we need to pass the returned function as an action for it to be useful.

Replacing a document

If we want to update the whole user we can use set:

firestoreAction(({ state }) => {
  // we first create a copy that excludes `id`
  // this exclusion is automatic because `id` is non-enumerable
  const user = { ...state.user }
  user.lastName = newLastName

  // return the promise so we can await this action
  return db
    .collection('users')
    .doc(state.user.id)
    .set(user)
    .then(() => {
      console.log('user updated!')
    })
})

TIP

If you await the promise returned by the write, your state will be up to date (if the write succeeds)

Updating a document

You can achieve a similar thing by calling update with lastName instead:

firestoreAction(({ state }) => {
  db.collection('users')
    .doc(state.user.id)
    .update({ lastName: newLastName })
    .then(() => {
      console.log('user updated!')
    })
})

Removing a document

You can remove documents by calling remove/delete on their reference:

firestoreAction((context, cityId) => {
  db.collection('cities')
    .doc(cityId)
    .delete()
})

Adding documents to a collection

You can add documents to collections by calling push/add on a collection reference:

firestoreAction(context => {
  // return the promise so we can await the write
  return db.collection('cities').add({
    name: 'Fuengirola',
    slogan: 'Un sol de ciudad',
  })
})

• RTDB: Updating or deleting data (opens new window)
• RTDB: Reading and writing lists (opens new window)
• Add data to Cloud Firestore (opens new window)

References

References are only supported by Cloud Firestore

To write a reference to a document, you pass the actual reference object:

db.collection('books').add({
  name: '1984',
  author: db.collection('authors').doc('george-orwell'),
})

Geopoints

Geopoints are only supported by Cloud Firestore Refer to Plugin installation to retrieve the Geopoint class

import { GeoPoint } from './db'

// add Paris to the list of cities and wait for the operation
// to be finished
await db.collection('cities').add({
  name: 'Paris',
  location: new GeoPoint(48.8588377, 2.2770206),
})

Timestamps

Timestamps are only supported by Cloud Firestore Refer to Plugin installation to retrieve the Timestamp class

import { Timestamp } from './db'

// Add "La prise de la Bastille" to a list of events
// and wait for th operation to be finished
await db.collection('events').add({
  name: 'Prise de la Bastille',
  date: Timestamp.fromDate(new Date('1789-07-14')),
})

Current Timestamp

When you need the current time at creation or update, you need to pass a special value to tell Firebase to use the server value instead

import { Timestamp } from './db'

await db.collection('documents').add({
  name: 'A document',
  createdAt: firebase.firestore.FieldValue.serverTimestamp(),
})