Firebase binding for Vuex
This is heavily inspired from vuefire.
Supports:
- Vue 1/2 with Vuex 1
- Vue 2 with Vuex 2
- If included as global
<script>: will install automatically if globalVueis present.
<head>
<!-- Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- Vuex -->
<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<!-- Firebase -->
<script src="https://gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<!-- VuexFire -->
<script src="https://unpkg.com/vuexfire/dist/vuexfire.js"></script>
</head>- In module environments, e.g CommonJS:
npm install vue vuex firebase vuexfire --savevar Vue = require('vue')
var Vuex = require('vuex')
var VuexFire = require('vuexfire')
var Firebase = require('firebase')
// explicit installation required in module environments
Vue.use(Vuex)
Vue.use(VuexFire)When binding
var store = new Vuex.Store({
state: {
items: null // items must be declared on the state
}
},
// actions, mutations, etc
)
new Vue({
el: '#app',
store: store,
vuex: {
getters: {
items: function (state) { return state.items }
}
},
firebase: {
items: db.ref('items') // bind as an array
}
})Setup mutations
var store = new Vuex.Store({
state: {
items: null
},
mutations: VuexFire.mutations,
getters: {
items: function (state) { return state.items }
}
})
new Vue({
el: '#app',
store: store,
computed: Vuex.mapGetters([
'items'
]),
firebase: {
items: db.ref('items')
}
})In larger applications you may consider splitting up your store
into modules. If that's your case you
can use module with vuexfire by using a dot separated key like cart.items or
user.cart.items. You must use the moduleMutations() method to generate the
mutations for your module
// Define a module
var cart = {
state: {
items: null // Initialize the variable
},
// Getters receive the cart module state only
getters: {
lastItem: function (state) {
return state.items[state.items.length - 1]
},
items: function (state) { return state.items }
},
mutations: VuexFire.moduleMutations('cart') // This is the name given to the store
}
// Create the store
var store = new Vuex.Store({
modules: {
cart: cart
}
}Everything else works just as vuefire. Refer to its readme for more documentation.
You can checkout the examples by serving an http-server at the root of this
project.
Hey dude! Help me out for a couple of 🍻!
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent