Install

npm install vuexfire

yarn add vuexfire

Vuexfire

SSR ready Firebase binding for Vuex

Documentation

Installation

 yarn add firebase vuexfire
# or
npm install firebase vuexfire

Usage

Add the mutations to your root Store and make sure to define the property you
want to bind in the state first:

 import { vuexfireMutations } from 'vuexfire'
const store = new Vuex.Store({
  state: {
    todos: [], // Will be bound as an array
    user: null, // Will be bound as an object
  },
  mutations: {
    // your mutations
    ...vuexfireMutations,
  },
})

It works with modules as well, but you should not add the mutations there:

 const store = new Vuex.Store({
  modules: {
    todos: {
      state: {
        todos: [], // Will be bound as an array
        user: null, // Will be bound as an object
      },
    },
  },
})

In order to use VuexFire, you have to enhance actions. This action enhancer
takes the actual action and enhances it with two additional parameters in the
context, bindFirestoreRef and unbindFirestoreRef:

 import { firestoreAction } from 'vuexfire'

const setTodosRef = firestoreAction(
  ({ bindFirestoreRef, unbindFirestoreRef }, { ref }) => {
    // this will unbind any previously bound ref to 'todos'
    bindFirestoreRef('todos', ref)
    // you can unbind any ref easily
    unbindFirestoreRef('user')
  }
)

Access it as a usual piece of the state:

 const Component = {
  template: '<div>{{ todos }}</div>',
  computed: Vuex.mapState(['todos']),
  created() {
    this.$store.dispatch('setTodosRef', { ref: db.collection('todos') })
  },
}

Browser support

VuexFire requires basic WeakMap support, which means that if you need to
support any of these browsers:

IE < 11
Safari < 7.1
Android < 5.0

You'll have to include a polyfill. You can
use atlassian/WeakMap.

You can find more information about WeakMap
support here.

How does it work?

VuexFire uses multiple global mutations prefixed by vuexfire/ to call the
actual mutations to modify objects and arrays. It listens for updates to your
firebase database and commits mutations to sync your state. Thanks to the action
enhancer firestoreAction, it gets access to the local state and commit so
it works with modules too :+1: