Vuex Store

example.js

// store/modules/example.js
const state = {
  example: null
}

const mutations = {
  setExample: function (state, payload) {
    state.example = payload
  }
}

const actions = {
  loadExample: function (context, payload) {
    context.commit('setExample', payload)
  }
}

const getters = {
  example: state => {
    return state.example
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

index.js

// store/modules/index.js
/**
 * The file enables `@/store/index.js` to import all vuex modules
 * in a one-shot manner. There should not be any reason to edit this file.
 */

const files = require.context('.', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  if (key === './index.js') return
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default modules

main.js

// other imports
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

rootStoreIndex.js

// store/index.js - this file should also just be called index.js, gists just don't allow duplicates.
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  strict: process.env.NODE_ENV !== 'production',
  plugins: [createPersistedState()]
})

vuexfire-example.js

// store/modules/vuexfire-example.js
import { firebaseMutations, firebaseAction } from 'vuexfire'

const state = {
  example: null
}

const mutations = {
  ...firebaseMutations,
  otherCustomMutation (state) {
    state.example = null
  }
}

const actions = {
  setUserRef: firebaseAction((context, ref) => {
    console.log('binding reference')
    context.bindFirebaseRef('example', ref, { readyCallback: function () {
      console.log('reference bound')
      // TODO: Anything else you want to do here..
    } })
  }),
  otherCustomAction (context) {
    context.commit('otherCustomMutation')
  }
}

const getters = {
  example: state => {
    return state.example
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}