VuexFire Mutations

Question

For anyone who has used VuexFire Vuex v2. What is mutations: VuexFire.mutations referring to here? The answer may be obvious but I have no idea what it means. Where do my actual mutations go then? I'm using Vuex v1 right now and it seems to be working fine but I would like to upgrade to using Vuex v2. Thanks!

var store = new Vuex.Store({
  state: {
    items: null
  },
  mutations: VuexFire.mutations, // What is this and where is it coming from??
  getters: {
    items: function (state) { return state.items }
  }  
})

new Vue({
  el: '#app',
  store: store,
  computed: Vuex.mapGetters([
    'items'
  ]),
  firebase: {
    items: db.ref('items')
  }
})

I have the same question. It seems it just automagically generates mutations? May want to make an issue in the repo https://github.com/posva/vuexfire — Ryan, Nov 19 '16 at 05:50

score 3 · Answer 1 · answered Apr 04 '17 at 15:32

I struggled with this one for a long while myself. Although I am not 100% sure of what the VuexFire.mutations does, I now understand that VuexFire is only in charge of getting your Firebase database data and correctly mutating your app state with that data.

So it seems that is the magical bit of code that make the local store's state mutation happen.

For your app to mutate / change Firebase database, you will still have to get the Firebase database reference and set / push / or whatever the data yourself.

For instance, using your code for illustration,

firebase: {
    items: db.ref('items')
}

will let mutations: VuexFire.mutations 'know' what to mutate your app state with. But to mutate your Firebase database, you will have to do something like:

db.ref('items').push(WhateverNewData)

I hope this helps.

would you be willing to look at another Vuexfire issue? https://stackoverflow.com/questions/59903702/how-to-use-moment-js-with-vuexfire — JS_is_awesome18, Jan 24 '20 at 21:41

VuexFire Mutations

1 Answers1