[Vuejs]-Check logged user in firebase with Nuxt.js middleware

by

3đź‘Ť

From the Vuex documents:

The only way to actually change state in a Vuex store is by committing
a mutation. Vuex mutations are very similar to events: each mutation
has a string type and a handler. The handler function is where we
perform actual state modifications
(Documentation link)

Mutations also trigger the DOM update in Vue, so that by committing a mutation, the reactive elements are updated, whereas directly manipulating state by sending a string will not cause the reactive update. From the Vuex docs:

Since a Vuex store’s state is made reactive by Vue, when we mutate the state, Vue components observing the state will update automatically

The section entitled “Mutations Follow Vue’s Reactivity Rules” has a more detailed run-down on this.

The caveat here is that mutations will only work for synchronous data. If you have async data, Vuex actions will be of assistance – they can perform a mutation and handle asynchronous events.

In the absence of further example code, it is difficult to asses whether there are other issues at play here, however I have included a sample store file that works for this exact scenario. Whilst not nuxt-specific, the principle is the same:

// store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  user: {},
  files: [],
  token: ''
}

const mutations = {
  logOut (state) {
    state.user = null
  },
  setUser (state, user) {
    state.user = user
  },
  setToken (state, token) {
    state.token = token
  }
}

const actions = {
  logOut: ({ commit }) => commit('logOut'),
  setUser: ({ commit }, user) => commit('setUser', user),
  setToken: ({ commit }, token) => commit('setToken', token)
 }

const getters = {
  user: state => state.user,
  token: state => state.token,
  files: state => state.files
}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

Then in your module:

import store from '@/store'
import { mapGetters } from 'vuex'

api.auth().onAuthStateChanged(function (user) {
  store.dispatch('setUser', user)    // .dispatch triggers ACTION, handling async evt
  if (user) {

  } else {

  }
})


export default {
  // mapGetters maps getters allowing this.user in script, or {{ user }} in template
  computed: mapGetters([
    'user',
    'files'
  ])
}
👤richter

Leave a comment