Skip to content
This repository has been archived by the owner. It is now read-only.
JavaScript
Branch: master
Clone or download
Latest commit b42e825 Apr 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build 🔧 Update build.js Sep 3, 2017
examples support Timestapms Apr 29, 2018
src support firebase 5 May 12, 2018
test 🚨 Fix lint Sep 3, 2017
.babelrc 🔧 Use babel-preset-env May 15, 2017
.eslintrc 🐛 support null values Apr 16, 2018
.gitignore 🔧 ignore osx junk Apr 29, 2018
.release-it.json 🔧 Fix release config Jan 25, 2018
LICENSE 📄 Update license year Sep 3, 2017
README.md Update README.md Apr 19, 2019
package.json 🔖 3.0.0-alpha.5 May 12, 2018
yarn.lock Clean up deps for v3 Jan 10, 2018

README.md

This package has been moved to vuejs/vuefire repository.


VuexFire Build Status npm package coverage size

SSR ready Firebase binding for Vuex

Supports only Vue 2, Vuex 2 and Firebase JavaScript SDK 2/3/4/5. If you need an older version check the v1 branch: npm i -D vuexfire@v1

Installation

  1. Using a CDN:
<script src="https://unpkg.com/vuexfire@next"></script>
  1. In module environments, e.g CommonJS:
npm install vue firebase vuexfire@next --save

Usage

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

import { firebaseMutations } 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
    ...firebaseMutations
  }
})

It works with modules as well, but you don't need to 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, bindFirebaseRef and unbindFirebaseRef:

import { firebaseAction } from 'vuexfire'

const setTodosRef = firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
  // this will unbind any previously bound ref to 'todos'
  bindFirebaseRef('todos', ref)
  // you can unbind any ref easily
  unbindFirebaseRef('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', 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 Benvie/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 firebaseAction, it gets access to the local state and commit so it works with modules too 👍

Examples

You can check out a complete example in the /examples directory.

API

firebaseMutations

This object contains VuexFire internal mutations. They are all prefixed by vuexfire/. This object must be added in the root Store mutations object.

bindFirebaseRef(key, ref)

Only available inside of an enhanced action

Binds a firebase reference to a property in the state. If there was already another reference bound to the same property, it unbinds it first.

bindFirebaseRef('todos', ref)

Returns a promise which will resolve when the data is ready, or throw an error if something goes wrong:

bindFirebaseRef('todos', ref).then(() => {
  commit('setTodosLoaded', true)
}).catch((err) => {
  console.log(err)
})

unbindFirebaseRef(key)

Only available inside of an enhanced action

Unbinds a bound firebase reference to a given property in the state.

unbindFirebaseRef('todos')

License

MIT

Support on Beerpay

Hey dude! Help me out for a couple of 🍻!

Beerpay Beerpay

You can’t perform that action at this time.