title: Vue.js & Firebase 'User' info
body: <p>I'm developing an app using Vue.js and Firebase.</p>
  
  <p>I've managed to get the login working using email/password, and can successfully store the firebase.auth() user info in the Vue.js state under state.currentUser .</p>
  
  <p>However, as per the Firebase guidelines, I have more information stored under a '/users' ref. Eg. /users/uid</p>
  
  <p>I'm wanting to pull this data into the vuex store too (state.userMeta), so I can use it around the site, however it never works after a refresh. If I don't refresh, logout and then log back in, it populates the state fine.</p>
  
  <p>Any help would be massively appreciated!</p>
  
  <p>James</p>
  
  <p><strong><em>auth.js</em></strong></p>
  
  <pre><code>import { auth, db } from '@/config/database'
  import store from '@/vuex/store'
  
  const init = function init () {
    auth.onAuthStateChanged((user) =&gt; {
      if (user) {
        store.dispatch('setUser', user)
      } else {
        // User is signed out.
        store.dispatch('setUser', null)
      }
    }, (error) =&gt; {
      console.log(error)
    })
  }
  
  export { init }
  </code></pre>
  
  <p><strong><em>store.js</em></strong></p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  import createPersistedState from 'vuex-persistedstate'
  import { db } from '@/config/database'
  
  Vue.use(Vuex)
  
  const state = {
    currentUser: null,
    userMeta: null
  }
  
  const mutations = {
    SET_USER (state, user) {
      if (user) {
        state.currentUser = user
        db.ref('users/' + user.uid).on('value', function (s) {
          state.userMeta = s.val()
        })
      } else {
        state.currentUser = null
        state.userMeta = null
      }
    }
  }
  
  const actions = {
    setUser ({commit}, user) {
      commit('SET_USER', user)
    }
  }
  
  const getters = {
    currentUser: state =&gt; state.currentUser
  }
  
  export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    plugins: [createPersistedState()]
  })
  </code></pre>
  
  <p><strong><em>App.vue</em></strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import * as auth from '@/config/auth'
  
  const initApp = function initApp () {
    auth.init()
  }
  
  export default {
    name: 'app',
    created: initApp
  }
  &lt;/script&gt;
  
  &lt;style lang="scss" src="./assets/sass/style.scss"&gt;&lt;/style&gt;
  </code></pre>
  
  <p><strong><em>main.js</em></strong></p>
  
  <pre><code>// The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import App from './App'
  import VueFire from 'vuefire'
  import router from './router'
  
  Vue.config.productionTip = false
  Vue.use(VueFire)
  
  import store from '@/vuex/store'
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    store,
    template: '&lt;App/&gt;',
    components: { App }
  })
  </code></pre>