Version 2.2.6 of vue just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As vue is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hello everyone!
Not sure how to do it, maybe it's a common question.

I have one Document called applications and another called users.
As it's now, my application store retrieves all applications on the node using:

setApplicationsRef: firebaseAction(({commit, bindFirebaseRef, state}, {ref}) => {
    return new Promise((resolve, reject) => {
      bindFirebaseRef('applications', ref, {
        readyCallback: (val) => {
          resolve(val)
        }
      })
    })
  })

The thing is that i want to retrieve only the applications that belongs to a user.
My documents:

applications
  -KkLUGf4jE1Q1pSSQgAR
     name: "app01"
     users
       fmHILzHN7BgecvFJR1Tttey2hHI3: true


users
  fmHILzHN7BgecvFJR1Tttey2hHI3
    applications
      -KkLUGf4jE1Q1pSSQgAR: true
    email: "[email protected]"
    emailVerified: true
    name: "Lucas Gertel"
    photoUrl: "https://lh5.googleusercontent.com/-S7TveZd9tzM/..."
    uid: "fmHILzHN7BgecvFJR1Tttey2hHI3"

Thanks!

I'm attempting to watch the state of one of my Firebase references, in order to trigger subsequent actions. Getting unexpected behavior where an action, dispatched from a watch callback, can no longer find the Firebase reference's methods. Instead, the object in the the store, rather than being a Firebase reference, has become an Observer object. Is this expected? Am I somehow losing the context by trigger an action from a component's watch?

I have been banging my head against the wall trying to solve this yet-another issue I have developping with VuexFire. And the lack of documentation is not helping.

here is my main.js

export default new Vue({
  el: '#app',

  // As soon as possible initialize Firebase bindings with Auth and database
  beforeCreate () {
    auth()
      .onAuthStateChanged(user => {
        if (user) {
          // bind the app's currentUser to the firebase user of the same uid
          this.$bindAsObject('users.currentUser', database().ref(`users/${user.uid}`))

          // // bind the app's claims instance to firebase's claims/${uid}
          // this.$bindAsArray('claims', database().ref(`claims/${user.uid}`))
        } else {
          auth()
            .signInAnonymously()
            .catch(this.$handleError)
        }
      }).bind(this)
  },

  render: h => h(App),

  store // inject vuex into all components as this.$store
})

and below is the Vuex module definition for 'users'

const state = {
  currentUser: null
}

const getters = {
  currentUser: ({ currentUser }) => currentUser,
  isLoggedIn: ({ currentUser }) => !!currentUser
}

const mutations = moduleMutations('users')

export default {
  getters,
  namespaced: true,
  mutations,
  state
}

What I get when I run this code is [vuex] unknown mutation type: users/VUEXFIRE/objectValue and it seems the bad code section is this.$bindAsObject('users.currentUser', database().ref(users/${user.uid}))

I just want my local state 'currentUser' to be synced with the registered user of the same uid in the Firebase Realtime Database. Any help or redirection to some documentation would be welcome. Thank you.

Hey, with same code than my last issue (#30) but disabling strict mode, i have this error now:

vuex.js?90cb:430 [vuex] unknown mutation type: VUEXFIRE/arrayAdd
commit @ vuex.js?90cb:430
boundCommit @ vuex.js?90cb:389
(anonymous) @ vuexfire.js?e9e3:201
(anonymous) @ database.js?8254:167
ub @ database.js?8254:61
Rb @ database.js?8254:49
Sb @ database.js?8254:48
g.Gb @ database.js?8254:235
g.wd @ database.js?8254:211
Ce.wd @ database.js?8254:113
(anonymous) @ database.js?8254:111
fd @ database.js?8254:67
Ia.onmessage @ database.js?8254:66

I suspect than the mutation type should be called as raffles/VUEXFIRE/arrayAdd, but don't know why isn't working.

Version 3.13.1 of eslint just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 3.19.0 of eslint just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Primarily objects
Arrays, maybe
docs to show the compatible way (using actions)

As I explained here i got an issue where data is added twice to the local array and once (as supposed to the remote firebase database). The issue can be reproduced with my issue demonstrator repo which is a trimmed down repo. I suspect the issue lies in the data binding but I'm unsure how to do it correctly.

Version 2.2.1 of vue just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As vue is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi all,

I am pretty sure I am the only one with this issue. I posted on StackOverflow but the system would not let me tag it properly with 'VuexFire'.

Here is my main.js where I declare the main VueJS app and its main components:

export default new Vue({
  el: '#app',

  // Binds app with Firebase servers as to always have the       currentUser
  beforeCreate () {
    auth()
      .onAuthStateChanged(user => {
        if (user) {
          // save the new user
          this.currentUser = user

          // get the required references to the Firebase database
          const currentUserRef = database().ref(`users/${user.uid}`)
          const claimsRef = database().ref(`claims/${user.uid}/`)

          // do the actual bindings from firebase to the vuex store
          this.$bindAsObject('users.currentUser', currentUserRef)
          this.$bindAsArray('claims.items', claimsRef) // <-- Here is the problem apparently

          // Make the binding references available on the root module
          this.currentUserRef = currentUserRef
          this.claimsRef = claimsRef
        } else {
          auth()
            .signInAnonymously()
            .catch(this.$handleError)
        }
      }).bind(this)
  },

  data: {
    claimsRef: null,
    currentUserRef: {},
    currentUser: null
  },

  render: h => h(App),

  router, // defines the main routing system in the app

  store // inject vuex into all components as this.$store
})

Binding as an Object is totally fine (no errors). But binding as an Array throws the following error:

Also, for reference, here is my corresponding Vuex module definition:

import { mutations as vuexMutations } from 'vuexfire'

const state = {
  items: null
}

const getters = {
  claims: ({ items }) => items
}

// Needed for VuexFire to automutate the bound claims items
const mutations = vuexMutations

export default {
  namespaced: true,
  mutations,
  state
}

Version 3.0.3 of uglify-js just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As uglify-js is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 3.7.5 of firebase just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As firebase is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi,

I have several single file components which use the same state variables. These components are linked between each other using vue-router.

Firebase is instantiated via function:

firebase: function() {
      var self = this;
      var startTime = 12345678;
      var tmpUid = 12345;
        return {
          overtimeBlocks: {
            source: db.ref('/overtime/' + tmpUid + '/blocks/').orderByChild("clockin").startAt(startTime),
            asObject: false
          },
          overtime: {
            source: db.ref('/overtime/' + tmpUid + "/").orderByChild("name"),
            asObject: false
          }
      }
}

And similarly (but with different parameters) in another component.

When routed between components, the state variable correctly loads each array element (shown within Vue-DevTools, but then is sent a "VUEXFIRE/objectValue" with a payload of {Key: "overtime", Record: null} which obviously sets the state variable to null and removes the loaded firebase data array.

Has anyone else experienced similar?

Many thanks,
Jake.

Its finally a day off and I'm diving into vuexfire, awesome! Something that throws me off right away is this line in the readme, "Everything else works just as vuefire. Refer to its readme for more documentation."

Likely vuexfire is very well put together but I'm trying to comprehend it in terms of my real life project. It looks like the snippet examples are scattered around and assume a lot of knowledge of firebase and jumping around between multiple repos.

What would be most helpful is if what vuexfire does would be added to the nice diagram that vuex already provides and a comprehensive guide could be put together. I can definitely help with suggestions along with other vuexfire users.

Maybe some details on how the binding to firebase actually works behind the scenes can be provided? Then some more clarity on the firebase refs vs the store module state and why it is necessary to declare things twice to achieve the binding. Some more complete well commented examples would help.

In the end I will need a global store that has ten modules. The state for these modules is already defined as JSON documents on firebase. The documents are not just simple counter values and such, instead they are large nested trees of values expressed as objects and arrays. What is not clear to me is if I need to re-declare all that nested data on the vuex side of things again?

If I have so much data in each document how am I suppose to bind this to a vuex store? Can I bind the complete document or bind to any part of it or can I instead just grab the aspects of it I need further down the component flow?

Sorry for all the questions but between needing to get a project setup, various ways to define a global store of modules and unclear firebase binding details I'm feeling that my free day is slipping way :)

P.S. It would be great if the older Vue v1 stuff could be extracted into it's own readme.

Hi, just a thought - with 2.0 around the corner, I thought it would be very cool to have a Webpack template for Vue 2.0 with Vuex/Vuexfire & Firebase setup and pre-configured (possibly with Bootstrap 4 included) as I can certainly see myself using this stack a lot more and would like to be able to get up and going very quickly for each new app.

Is this something you'd be interested in, or am I best to just fork the Webpack template and create something for my own needs? Obviously this isn't the correct repo (Webpack template for Vue-cli), but wanted to run it by you first.

Thanks in advance.

Suppose I have an index of users in a group:

group: {
  user1: true,
  user7: true,
  user15: true,
  etc...
}

I want to bind references to each of these users to the store:

for (const userKey in group) {
  this.$bindAsObject('users.${userKey}', db.ref('users/${userKey}'))
}

It seems that it's not possible. Is there anything I can do instead?

so i have this code in my users module

import VuexFire from 'vuexfire'

const state = {
  auth: null,
  user: null,
  current_user: null,
  foundUser: null,
  users: null,
};

const getters = {
  getFoundUser(state) {
    return state.foundUser;
  }
};

const mutations = VuexFire.moduleMutations('users');

const actions = {
  addUser({rootState},user) {
    if(!user) return;
    rootState.refs.users.push(user);
  },
  deleteUser({rootState},user) {
    if(!user) return;
    rootState.refs.users.child(user['.key']).remove();
  },
  updateUser({rootState},user) {
    if(!user) return;
    rootState.refs.users.child(user['.key']).update(user);
  },
  getUserBy({state,rootState},{by,value}) {
    _.find(rootState.users,[by,value]);
  }
};
//called by this.$store.dispatch('addUser')
export default {
  state,
  getters,
  mutations,
  actions
}

and use it on my root store instance
this is just an object and will be converted to on the main js

const store = {
  state: {
    refs: null,
  },
  // modules: {
  //   stores,
  //   items,
  //   users,
  //   managers,
  //   employees,
  //   customers,
  //   transactions,
  // },
  mutations:  { ['SET_REFS'](state,payload){
    state.refs = payload;
  }},
  // mutations: Object.assign({},VuexFire.mutations,{
  //   ['SET_REFS'](state,payload) {
  //     state.refs = payload;
  //   }
  // })

};

export default store

then import that root store on my main js

and do store.registerModule

if i dont do that it replaces my users module states all of it

import VuexStore from './vuex';

import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import VuexFire from 'vuexfire'
import App from './App.vue';
import VuexStore from './vuex';
import { sync } from 'vuex-router-sync';
import routes from './routes';
import firebase from 'firebase';
import db from './firebase_config';
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

import users from './vuex/modules/users'
import items from './vuex/modules/items'
import stores from './vuex/modules/stores'
import managers from './vuex/modules/managers'
import employees from './vuex/modules/employees'
import customers from './vuex/modules/customers'
import transactions from './vuex/modules/transactions'

Vue.use(Vuex);
Vue.use(VueRouter);
Vue.use(VuexFire);
Vue.use(VueMaterial)

Vue.material.theme.register('default', {
  primary: 'blue',
  accent: 'teal'
})

const store = new Vuex.Store(VuexStore);
store.registerModule('users',users)
const router = new VueRouter({
  mode: 'history',
  routes,
});

sync(store, router);

const app = new Vue({
  router,
  store,
  firebase: {
    users: db.ref('users'),
    // items: db.ref('items'),
    // stores: db.ref('stores'),
    // managers: db.ref('managers'),
    // employees: db.ref('employees'),
    // customers: db.ref('customers'),
    // transactions: db.ref('transactions'),
  },
  render: h => h(App),
  beforeCreate() {
    if(!this.$store.state.refs) {
      this.$store.commit('SET_REFS', this.$firebaseRefs);
      // this.$store.dispatch('deleteUser', {['.key']: '-KXIgd1C7L_F5UVZ-oAM'});
    }
  }
}).$mount('#app');

and error pops out on the console

i dont know if my setup is right or its a bug

ATM there's only one mutation. This can be improved with multiple mutations as they were before

Following recent issues #12, #13 and #9, I've been thinking about how vuexfire API should be in the future. Now, I know the v1 is not even out but the idea is to make the current version a v1 with the least possible amount of breaking changes and adding deprecations for v2.
In v2, support for Vue 1, Vuex 1 and Firebase 2 will be dropped while v1 would still be supporting them all.

What is wrong with the current API

There are many things that aren't currently optimal and that I'd like to address in v2

Double efforts to bind a reference

ATM you have to declare a variable in the state and also tell vuexfire what's the firebase reference that should go there:

// store.js
const state = {
  items: null // binded later
}

// some-view.vue
firebase: {
  items: db.ref('items')
}

This is actually not needed because I can just do Vue.set(state, key, value) and the data will be reactive, which was the problem I was facing in the first time. I tried it and works fine at least for Vue 2.
However, this also makes it harder to see how the state is built, since you cannot just check store.js (or any other module) and walk through the state variable. Your state is spread all around your app, which is not convenient.
I therefore think making the user declare the state is a good thing but I should not force that unless it is the only way.

Using firebase option makes no sense

Initially the firebase option was taken from vuefire, however, it doesn't make sense having to use a Vue instance to bind the references to the Vuex store.
In the current state, it's very easy to migrate from vuefire to vuexfire but you cannot use both at the same time which makes sense in very specific situations.

Binding, unbinding should be doable out of a vm instance. In other words vuexfire should expose functions for this purpose and not add any extra method to the Vue prototype.

What I think would be a good new API for vuexfire

Removing the firebase option to declare references binding alongside all the methods/variables added to the Vue prototype ($bind, $unbind, $firebaseRefs).
This will allow vuefire to work at the same time that vuexfire.

Installing VuexFire as usual:

// main.js
Vue.use(Vuex)
Vue.use(VuexFire)

// store.js
import { generateMutations } from 'vuexfire'

var sore = new Vuex.Store({
  state: {
    list:  null
  },
  mutations: {
    ...mutations,
    ...generateMutations() // Pass the module name as an argument
  }
})

Exposing those as methods:

import { bind, refs } from 'vuexfire'

setListRef ({ commit, state }, { listRef }) {
  // The current state may have another ref binded
  // state === { list: [...] } 
  // the bind method needs access to the commit and a key to bind on the state
  const unbind = bind(commit, 'list', listRef)
  // VuexFire will internally get the path from the ref and save it
  // so you can later on access it

  // call unbind() if you manually want to unbind
}

// You still don't need an action but here's an example
// using one
addToList (context, { item }) {
  // Giving the path of the ref was 'items'
  // It could have been 'users/someUser/list'
  refs('list').push(item)
}

Notice how you no longer specify the module you're binding to because the bind method use a commit function that is bound to the module you're working with. Internally a reference to the commit function is saved so calling bind again on the same key within the same module will unbind a previously bound reference.

Since VuexFire is no longer aware of the module you're working in, you cannot use a method like unbind('cart.items') to unbind the key items of the module cart. This should not be a problem since unbinding is done automatically when binding a new value and since you can always dispatch an action to call the unbind method.

If the user manually register any module then, he would also have to manually unbind any refs used by that module when unregistering it.

Please, share your thoughts on this 😄

Hello!
I'm with a question about the best pratice when using vuexfire.

Where's the best place to put logic like this one:

        let appsRef = db.ref('applications')
        let connectorsRef = db.ref('connectors')
        let appConnectorsRef = appsRef.child(this.$route.params.id).child('connectors')
        appConnectorsRef.on('child_added', (snap) => {
          connectorsRef.child(snap.key).once('value', (snap) => {
            console.log(snap.val())
          })
        })

I have one application module that already used bindFirebaseRef to initialize data, and now I'm using this code inside a method component.

Not sure if this kind of thing should be added as a getter in my module or something like that.
Can you help me with this?

Ty!

I'm testing the new modules update and am having some trouble.

EDIT: I think I may be misunderstanding how vuexfire works with mutations. Does it automagically make them for us?

I'm getting the error:

Here's the lay of the land:

/vuex/modules/auth/actions.js

import firebase from '../../../services/firebase.js'

import { AUTHENTICATE } from './mutation-types';

export function fetchUser ({ commit }) {
  return firebase.auth.onAuthStateChanged((user) => {
    commit(AUTHENTICATE, user);
  });
}

/vuex/modules/auth/getters.js
export const getAuth = state => state.user

/vuex/modules/auth/index.js

import * as actions from './actions';
import * as getters from './getters';

import { AUTHENTICATE } from './mutation-types'

const initialState = {
  user: null
}

const mutations = {
  [AUTHENTICATE] (state, user) {
    state.user = user
  },
}

export default {
  state: { ...initialState },
  actions,
  getters,
  mutations,
}

/vuex/modules/auth/mutation-types.js
export const AUTHENTICATE = 'auth/AUTHENTICATE';

/vuex/modules/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import VuexFire from 'vuexfire'

import auth from './modules/auth'
import games from './modules/games'

Vue.use(Vuex)
Vue.use(VuexFire)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  modules: {
    auth,
    games,
  },
  strict: debug,
})

App.vue

  export default {
    components: {
      AppNav
    },
    created () {
      this.$store.dispatch('fetchGames');
      this.$store.dispatch('fetchUser');
    }
  }

The only thing I'm able to find is that with I'm supposed to use mutations: VuexFire.moduleMutations('items') somewhere if I'm using modules, and I'm not sure where though in a setup like this.

Version 2.2.5 of vue just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As vue is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 2.3.3 of vue just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As vue is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Currently, vuexfire only let you declare refs in the state.
In bigger applications, you may need to to use modules.

Version 2.2.4 of vue just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As vue is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I have this instance happening where I only want data from firebase in the store. When I have another component binding something from Firebase:

firebase: {
   users: firebase.database().ref('users')
}

I do not have this defined in the store but the store is asking for it:
database.js?8254:60Uncaught Error: VuexFire: bind failed: "users" is not defined

Is there a way to still use firebase in some components with vuefire but not have them bound to the store?

I like vuexfire very much. What I wanted was to have a loading gif show when the database is waiting to be loaded. I tried using the readyCallback but it is not working. When the store is loaded, it doesn't call the readyCallback function. what am I missing.

Version 2.0.2 of eslint-plugin-html just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-html is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I'm struggling to identify ways to keep vuefire and vuexfire DRY.

It appears in order to perform operations like add, remove, update I need access to a database reference for the objects. It doesn't appear I can use vuexfire like vuex in the sense that I can dispatch actions and commit mutations to alter them. Am I right in thinking the best way to keep things clean is to create a module that contains an instance of each type of ref I need and export them to make them available.

Additionally, I can't seem to find a way to access user specific database references?

I tried to create a callback that would change my references after auth but these all fail with the error
vue.common.js?e881:435 Error: VuexFire: invalid Firebase binding source.

<head>
    <!-- Vue -->
    <script src="https://unpkg.com/vue/dist/vue.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>

should be

<head>
    <!-- Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- Firebase -->
    <script src="https://gstatic.com/firebasejs/3.5.2/firebase.js"></script>
    <!-- Vuex -->
    <script src="https://unpkg.com/vuex/dist/vuex.js"></script>
    <!-- VuexFire -->
    <script src="https://unpkg.com/vuexfire/dist/vuexfire.js"></script>
  </head>

yeah?

As seen in #5 and other requests, it'll be great to get further guidance and best practices about how to use firebase with vuexfire

• Where to bind references (actions)
• Where should the actual bound called (where to dispatch actions)
• where to host references
• How to write tests

Feel free to share your thoughts on this about what you'll like to see

These two things seem to be at odds and it's making it hard for me to understand how I should be trying to structure my code:

1. The Vuex docs state, "The only way to actually change state in a Vuex store is by committing a mutation."

2. The Vuexfire TodoApp addTodo() method uses $firebaseRefs.items.push() to create records.

I would have guessed there to use something like: store.commit('addTodo', <payload>) or, from what I'm reading, I guess that should even be pushed through an action rather than a mutation.

Although … shouldn’t addTodo()’s Firebase work be done in an action and based on its success/failure trigger a mutation?

That seems close to the use case described in the Vuex Actions docs under the Dispatching Actions section at the code sample with header: “A more practical example of real-world actions ... which involves calling an async API and committing multiple mutations:”

I'm just starting to investigate Vuexfire, and trying to understand best implementation practices. In the example todo app, you're making updates directly to Firebase references from an app method. This strikes me as somewhat of an anti-pattern, since the whole idea of Vuex is to separate concerns, and manage state reactively by triggering actions/mutations on the store.

So it's almost like your Firebase db becomes a second/parallel state manager, and your Vuex store reacts to changes to the db, through which other collaborator Vue components can respond accordingly.

I'm wondering if, rather than triggering changes to Firebase from component methods, it would be better to create mutations/actions on the Vuex store that call Firebase reference methods. This would keep individual components agnostic to the database layer and put all state management responsibilities (including persisting changes to the database) in the Vuex layer.

Example:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import { firebaseMutations, firebaseAction } from 'vuexfire';

Vue.use(Vuex);

const db = firebase.initializeApp(firebaseConfig).database();

const refs = {
  counter: db.ref('counter')
};

export default new Vuex.Store({
  state: {
    counter: {
      increment: 0
    }
  },
  getters: {
    counter (state) {
      return state.counter.increment;
    }
  },
  mutations: {
    increment (state) {
      refs.counter.set({
        increment: state.counter.increment + 1
      });
    },
    ...firebaseMutations
  },
  actions: {
    setCounterRef: firebaseAction(({bindFirebaseRef}, ref) => {
      bindFirebaseRef('counter', refs.counter);
    })
  }
});


// App.Vue
<template lang="pug">
  div.app
    button(v-on:click="increment") Increment
    span.counter {{ counter }}
</template>

<script>
import Vuex from 'vuex';

export default {
  methods: {
    increment () {
      this.$store.commit('increment');
    }
  },
  computed: {
    counter () {
      return this.$store.getters.counter;
    }
  }
}
</script>


// app.js
import App from './App.vue';
import store from './store.js';

new Vue({
  el: '#cohear',
  store,
  render: h => h(App),
  created() {
    this.$store.dispatch('setCounterRef');
  },
});

Looks good. Can I use this in production ? @posva

Hi!

Was trying to make this works on my project with no success. I have multiple modules on my store and have modules on different files, my code is like as follow

store/index.js

import VuexFire from 'vuexfire'
import * as actions from './actions'
import * as getters from './getters'

... // HERE I IMPORT SOME OTHERS MODULES

import raffles from './modules/raffles'

Vue.use(Vuex)
Vue.use(VuexFire)

const store = new Vuex.Store({
  strict: true, 
  actions,
  getters,
  modules: {
    ... // HERE I ADD THE OTHERS MODULES
    raffles
  },
  state: {
  },
  mutations: {
  }
})

export default store

store/modules/raffles.js

import VuexFire from 'vuexfire'

const state = {
  raffles: null
}

const mutations = VuexFire.moduleMutations('raffles')

export default {
  state,
  mutations
}

app.js

import Vue from 'vue'
import * as firebase from 'firebase'
import store from './store'
import { sync } from 'vuex-router-sync'
import App from './App'

// Initialize Firebase
var config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
}
const firebaseApp = firebase.initializeApp(config)
const db = firebaseApp.database()

const app = new Vue({
  store,
  ...App,
  firebase: {
    raffles: db.ref('raffles')
  }
})

export { app, store, firebaseApp }

I don't know why i am getting this full error on the console:

[Vue warn]: Error in watcher "state" 
(found in root instance)
warn @ vue.common.js?e881:521
vue.common.js?e881:3027 Uncaught Error: [vuex] Do not mutate vuex store state outside mutation handlers.
    at assert (eval at <anonymous> (app.js:904), <anonymous>:214:27)
    at Vue$3.store._vm.$watch.deep (eval at <anonymous> (app.js:904), <anonymous>:755:5)
    at Watcher.run (eval at <anonymous> (app.js:796), <anonymous>:3017:19)
    at Watcher.update (eval at <anonymous> (app.js:796), <anonymous>:2991:10)
    at Dep.notify (eval at <anonymous> (app.js:796), <anonymous>:580:13)
    at Object.reactiveSetter [as raffles] (eval at <anonymous> (app.js:796), <anonymous>:810:11)
    at Object.initWithValue (eval at <anonymous> (app.js:1391), <anonymous>:475:17)
    at bindAsArray (eval at <anonymous> (app.js:1391), <anonymous>:196:15)
    at bind (eval at <anonymous> (app.js:1391), <anonymous>:180:6)
    at Vue$3.created (eval at <anonymous> (app.js:1391), <anonymous>:336:8)

Thanks and any helps will be appreciated.

I'm doing something #wrong.
I have this code on my store, but when retrieving from my component the then in dispatch is called before the callback.

On my component:

methods: {
      fetchData() {
        this.loading = true
        this.$store.dispatch('setApplicationsRef').then(response => {
          console.log('data dne')
          this.loading = false
        })
      }
    }
And on my module:

const actions = {
  setApplicationsRef: firebaseAction(({commit, bindFirebaseRef, state}) => {
    return new Promise((resolve, reject) => {
      bindFirebaseRef('applications', applicationsRef, {
        readyCallback: () => {
          resolve()
        }
      })
    })
  })
}

The console.log('data dne') is getting called before the resolve on actions

I'm wrestling a bit with how best to manage the 'extra' info that vue and vuexfire create on state objects. I have an object mapped to a firebase reference called 'groups' which might contain zero or more 'group' records. Obviously with FB, you can't have a key with no value, so the key itself isn't even present when there are zero groups. In this case, the mapped vuexfire obejct looks like this:

console.log(Reflect.ownKeys(state.groups))
(3) [".value", ".key", "__ob__"]

If I then create a group called test, the result is as below:

console.log(Reflect.ownKeys(state.groups))
(3) ["test", ".key", "__ob__"]

So, calculating the number of groups is problematic (can't use .length of the Reflect call directly), and iterating using v-for is also tricky as it pulls out the vuexfire .key and .value properties if they're there (I'm presuming .value is only there if the reference is 'empty' as a placeholder? Or does it serve some other purpose?).

Do you have any advice or best ways of doing this with vuexfire? Or would you consider adding any helpers to vuexfire to make it easy to use mapped objects with v-for, count how many child nodes there are, etc.?

Hi thanks so much for making this library, however i have a small problem with the vuexfire mutation. I get this error:
[vuex] unknown mutation type: VUEXFIRE_ARRAY_INITIALIZE and unknown mutation type: vuexfire/ARRAY_ADD:
Here is my store.js:

`import Vue from 'vue'
import Vuex from 'vuex'
import { firebaseAction, firebaseMutations } from 'vuexfire'

Vue.use(Vuex)

const store = new Vuex.Store({
  strict: true,
  state: {
    projects: [],
    items: [],
  },
  actions: {
    setItemsRef: firebaseAction(({ bindFirebaseRef }, ref) => {
      bindFirebaseRef('items', ref)
    }),
  },
  mutations: {
    firebaseMutations,
  },
  getters: {
    compconstedProjects: state => state.projects.filter(project => project.compconsted).length,
    projectCount: state => state.projects.length,
  },
})
export default store`

and in my component I am calling the action setItemsref like this:

export default {
  computed: mapState([
    'items',
  ]),
  created() {
    this.$store.dispatch('setItemsRef', ref)
  },
}

When using the firebase function, this should be posible

firebase () {
  return {
    items: db.child(this.itemRefName)
  }
},
data () {
  return {
    itemRefName: 'items'
  }
}

I just tried to add vuexfire to an existing project, and I get this:

npm ERR! peer dep missing: firebase@^2.4.1 || 3.x.x, required by [email protected]

Is vuexfire not compatible with [email protected]? Or is it just a transient thing whilst stuff gets updated?

Version 3.6.5 of firebase just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As firebase is “only” a peerDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I'm having some trouble getting off the ground with vuexFire. Here's my project It is a webpack-simple build from vue-init with a pretty bare bones example at the moment.

note the src/store directory.

When I npm run dev this, I get an error:

vuex.js?90cb:373 Uncaught TypeError: plugin is not a function
    at eval (eval at <anonymous> (http://localhost:8080/dist/build.js:1008:1), <anonymous>:373:68)
    at Array.forEach (native)
    at new Store (eval at <anonymous> (http://localhost:8080/dist/build.js:1008:1), <anonymous>:373:33)
    at eval (eval at <anonymous> (http://localhost:8080/dist/build.js:907:1), <anonymous>:30:13)
    at Object.<anonymous> (http://localhost:8080/dist/build.js:907:1)
    at __webpack_require__ (http://localhost:8080/dist/build.js:660:30)
    at fn (http://localhost:8080/dist/build.js:84:20)
    at eval (eval at <anonymous> (http://localhost:8080/dist/build.js:1053:1), <anonymous>:4:71)
    at Object.<anonymous> (http://localhost:8080/dist/build.js:1053:1)
    at __webpack_require__ (http://localhost:8080/dist/build.js:660:30)

This happens to be at plugins: [VuexFire.default] in my new Vuex.Store
So I put a console log above it to check it out:
console.log('VuexFire: '+JSON.stringify(VuexFire), 'Vuex:'+JSON.stringify(Vuex))

This produces:

VuexFire: undefined Vuex:{"version":"2.1.1","installed":true}

even though both are installed and imported.

I am trying to use this for a blog site, while I was prototyping everything worked great.. until I imported my dataset, only about 6000 posts.

Is there something better I could do? As soon as this wakes up it starts pulling from the root of the '/posts' and my chrome memory usage shoots up to 1.6GB.

If I do the .limitToFirst(30) I am able to run fine again, but then I cannot get more posts.

Thank you!

import lodash from 'lodash';
import { firebaseMutations, firebaseAction } from 'vuexfire';
import { fbAppAuth } from 'src/fbase'
// Swap these comments for debug server.
// import { fbApp } from 'src/fbase'
// const db2 = fbApp.database();
// const postsRefDebug  = db.ref('zzPosts');
const db2 = fbAppAuth.database();
const postsRef  = db2.ref('posts').limitToFirst(30);

const postsModule = {
    state: {
        posts: []
    },
    getters: {
        getPosts(state) { return state.posts; },
        // upvotedPosts(state) { return state.posts.filter(post => post.votes > 0) }
    },
    actions: {
        setPostsRef: firebaseAction((context, ref) => { context.bindFirebaseRef(`posts`, ref); }),
        addpost({ commit }, params) { commit('ADD_POST', params) },
        removepost({ commit }, key) { commit('REMOVE_POST', key) },
        upvotepost({ commit }, key) { commit('UPVOTE_POST', key) },
    },
    mutations: lodash.merge(firebaseMutations, {
        ADD_POST(state, payload) {
            postsRef.push(payload);
        },
        REMOVE_POST(state, key) { // TODO if I am the owner
            if(!key)
                return;
            postsRef.child(key).remove();
        },
        UPVOTE_POST(state, key) {
            if(!key)
                return;
            const theDataRef = postsRef.child(key)
            theDataRef.once('value', (snapshot) => {
                theDataRef.update({
                    votes: snapshot.val().votes + 1
                })
            })
        },
        // ...firebaseMutations
    }),
    methods: {
        /**
        * @function {init} optional function. This is called by the store on load
        * @param  {string} store      {The store instance. This is the store passing itself in to this function}
        * @param  {string} importName {The name that this module was imported as. Necessary to dispatch actions to the store. }
        */
        init(store, importName) {
            const iname = importName || `posts`;
            store.dispatch(`${iname}/setPostsRef`, postsRef);
            // console.log(`posts init called! ${postsRef}`)
        }
    },
    /**
     * @param {bool} namespaced - please always keep include this. THis will namespace this module on the outside.
    */
    namespaced: true
}

export default postsModule;

I need to return a promise from my action.
Not sure how to do it, can someone help me?

This do not works as I usually do with Vuex

const actions = {
  setApplicationsRef({commit, state}) {
    return new Promise((resolve, reject) => {
      const testing = firebaseAction(({ bindFirebaseRef }, { ref }) => {
        bindFirebaseRef('todos', ref, {readyCallback: () => {
            resolve()
        }})
      })
    })
  }
}

I've got the basic setup working in that the state is bound to a firebase reference, and changes to the firebase are immediately reflected in the app.

I would like the app (components) to not really know anything about firebase though, and I had originally assumed that changing the state bound to firebase would also trigger updates to firebase. But I guess not - looking at the source it looks like it's only listening for firebase updates, not also making firebase writes.

Do you have plans to make vuexfire work in both directions?

If not, I guess I would need to write to firebase in the store actions - is that a good (or best) place to do it? Is there an existing pattern for replicating state changes back to firebase?

Tx

Version 2.2.3 of vue just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As vue is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I tried adding this after scaffolding a project with Vue-cli (using webpack#2.0), but I get the following error in the browser console after following the docs.

Uncaught TypeError: _vuexfire2.default.mapGetters is not a function

Please advise, thanks.

Hi @posva - best to open an issue here. Myself and @microcipcip are having issues getting Vuexfire working correctly in a typical Webpack setup.
I have provided an example repo here. This should connect straight to my Firebase database, you can see the Vuex store populate with the data from Firebase, however, it is not updating the DOM.

Would you mind taking a look please, so that we can provide a solid example for others looking to use Vuexfire with a project generated with Vue-CLI?

Thanks in advance.

put both in to vuex folder

firebase-config.js

import * as firebase from 'firebase'

firebase.initializeApp({
  apiKey: "AIzaSyD51nbaS-M9rE4iud3bbJEZSvfcNwt4b4g",
  authDomain: "eclipse-5f86e.firebaseapp.com",
  databaseURL: "https://eclipse-5f86e.firebaseio.com",
  storageBucket: "eclipse-5f86e.appspot.com",
  messagingSenderId: "99048529317"
});

export default firebase;

import firebase from './utils/firebase-config'

function indexForKey(array, key) {
  return array.findIndex(element => element['.key'] == key);
}

function createRecord(snapshot) {
  let data = snapshot.val();
  data['.key'] = snapshot.key;
  return data;
}

function runFirebaseEvents(key, store) {

  let ref = store.getters[`$${key}`];

  let records = store.getters[key];

  ref.on('child_added', function (snapshot, prevKey) {
    let index = prevKey ? indexForKey(records, prevKey) + 1 : 0;
    let record = createRecord(snapshot);
    record['.ref'] = key;
    store.commit(`${key}/ADDED`, {index, record});
  });

  ref.on('child_changed', function (snapshot) {
    let index = indexForKey(records, snapshot.key);
    let record = createRecord(snapshot);
    record['.ref'] = key;
    store.commit(`${key}/CHANGED`, {index, record});
  });
  ref.on('child_removed', function (snapshot) {
    let index = indexForKey(records, snapshot.key);
    store.commit(`${key}/REMOVED`, {index});
  });
  ref.on('child_moved', function (snapshot, prevKey) {
    let index = indexForKey(records, snapshot.key);
    let newIndex = prevKey ? indexForKey(records, prevKey) + 1 : 0;
    newIndex += index < newIndex ? -1 : 0;
    store.commit(`${key}/MOVED`, {newIndex, index});
  });

}

function generateMutations(key) {
  return {
    [`${key}/ADDED`](state, {index, record}) {
      state[key].splice(index, 0, record)
    },
    [`${key}/CHANGED`](state, {index, record}) {
      state[key].splice(index, 1, record)
    },
    [`${key}/REMOVED`](state, {index}) {
      state[key].splice(index, 1);
    },
    [`${key}/MOVED`](state, {newIndex, index}) {
      const array = state[key];
      const data = array.splice(index,1)[0];
      array.splice(newIndex,0,data);
    }
  }
}

function generateGetters(key) {
  return {
    [`$${key}`](state) {
      return state[`$${key}`];
    },
    [key](state) {
      return state[key];
    }
  }
}

function generateState(key) {
  return {
    [`$${key}`]: firebase.database().ref(key),
    [key]: []
  }
}

export function VuexFireSync(key) {
  return {
    state: {
      ...generateState(key)
    },
    mutations: {
      ...generateMutations(key)
    },
    getters: {
      ...generateGetters(key)
    }
  }
}
export function VuexFireActions() {

  return {
    VuexFireSave({getters}, data) {
      let clonedData = Object.assign({}, data);
      let keyId = data['.key'];
      let ref = getters[`$${data['.ref']}`];
      if (clonedData['.key']) {
        delete clonedData['.key'];
      }
      delete clonedData['.ref'];


      if(keyId) {
        clonedData['test'] = 'tester';
        clonedData['updated'] = firebase.database.ServerValue.TIMESTAMP;
        ref.child(keyId).update(clonedData)
      } else {
        clonedData['created'] = firebase.database.ServerValue.TIMESTAMP;
        ref.push(clonedData)
      }
    },
    VuexFireRemove({getters}, data) {
      let ref = getters[`$${data['.ref']}`]

      ref.child(data['.key']).remove();
    },

  };
}


export function VuexFireEvents(modules) {
  let keys = Object.keys(modules);
  return store => {
    keys.forEach(key => {
      if (!store.getters[`$${key}`] && !store.getters[key]) return;
      runFirebaseEvents(key, store);
    })
  }
}

in a module users module

import {VuexFireSync} from '../plugin'

const state = {

};

const mutations = {

};

const getters = {

};

const actions = {

};

const users = {
  state,
  mutations,
  getters,
  actions,
  ...VuexFireSync('users')
};

export default users;