VuexFire
SSR ready Firebase binding for Vuex
Supports only Vue 2, Vuex 2 and Firebase 2/3
If you need an older version check the v1
branch: npm i -D vuexfire@v1
Installation
- Using a CDN:
<script src="https://unpkg.com/vuexfire"></script>
- In module environments, e.g CommonJS:
npm install vue firebase vuexfire --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 enhance 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 it easily too
unbindFirebaseRef('todos')
})
Access it as an usual piece of the state:
const Component = {
template: '<div>{{ todos }}</div>',
computed: Vuex.mapState(['todos']),
created () {
this.$store.dispatch('setTodosRef', db.ref('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 listen for updates to your
firebase database and commit 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 checkout the examples by opening the html files in your browser, or check this online Demo
API
firebaseMutations
This objects contains VuexFire internal mutations. They are all prefixed by
vuexfire/
. This object must be added in the root Store mutations object.
bindFirebaseRef(key, ref[, options])
Only available inside of an enhanced action
Binds a firebase reference to property in the state. If there was already another reference bound to the same property, it unbinds it first.
options:
{
cancelCallback: Function, // Cancel callback passed to Firebase when listening for events
readyCallback: Function, // Callback called once the data has been loaded. Useful for SSR
}
unbindFirebaseRef(key)
Only available inside of an enhanced action
Unbinds a bound firebase reference to a given property in the state.
Support on Beerpay
Hey dude! Help me out for a couple of š»!