CODEWITHSUNDEEP
vue.jsvuex
maxwellgover
maxwellgover

Reputation: 7151

VuexFire Mutations

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')
  }
})

Upvotes: 1

Views: 1083

Answers (1)

igreka
igreka

Reputation: 350

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.

Upvotes: 3

Related Questions