Vuex unkown action with Nuxt JS / Firebase

Question

I'm trying to implement an authentication system in Nuxt JS 2.9.2, and Firebase 6. I'm using the Nuxt Fire module, and Vuexfire module.

I've successfully setup the system where a user can be created, logged in, and logged out, as well as saving some data to the real time database, however, I'm having some troubles trying to retrieve data from my real-time database.

I'm trying to pull out information from my real-time database based on the user currently logged in, e.g:

store/localStorage.js

import firebase from 'firebase'
import { firebaseAction } from 'vuexfire'

export const state = () => ({
  user: null,
  account: null
})

export const actions = {

  setAccountRef: firebaseAction(({ bindFirebaseRef }, path) => {
    return bindFirebaseRef('account', firebase.database().ref(path))
  })

}

export const mutations = {

  /*
   * Set user information
   */
  setUser (state, payload) {
    state.user = payload
    return this.dispatch('setAccountRef', `accounts/${state.user.uid}`)
  }

}

Unfortuantly, my setup appears to give me a: [vuex] unknown action type: setAccountRef error.

For your information, setUser is ran from another module file:

store/authentication.js

createUser ({commit}, payload) {
    this.$fireAuth.createUserWithEmailAndPassword(payload.email, payload.password).then(function({user}) {
      commit('localStorage/setUser', { email: payload.email, uid: user.uid }, { root: true })
      createNewAccount(user)
      $nuxt.$router.push({ path: '/', query: {
        alertActive: true,
        type: 'info',
        message: 'Your account has been successfully created'
      }})
    }).catch(function(error) {
      console.log('error registering' + error)
    });
  }

What am I missing in terms of the unknown action?

Answer 1

General

I would advise you to never don't blow up your mutations, mutations are meant to only update the local state. They also cannot be asynchronous.

You cannot access dispatch in mutations anyway. You only get the state and the payload as parameters.

Read more in the official vuex documentation.

Solution for your problem:

Create an action called setUser(), there you can access dispatch like so:

export const actions = {

  setAccountRef: firebaseAction(({ bindFirebaseRef }, path) => {
    return bindFirebaseRef('account', firebase.database().ref(path))
  }),

  setUser: ({commit, dispatch}, payload) => {
    commit('SET_USER', payload)
    return dispatch('setAccountRef', `accounts/${payload.uid}`)
  })

}

export const mutations = {

  /*
   * Set user information
   */
  SET_USER: (state, payload) => {
    state.user = payload
  }

}

Hope that helped.