[Vuejs]-Vuex Object Shows Null in Vue Component

by

0👍

My guess is that your dispatch() (Vue.js actions are ALWAYS expected to be async) is not completing properly. This is how I would rewrite it with a single caveat:

Your base/setLoggedInUser Vuex action MUST return a Promise for this to work properly.

/*
export const instantiate = ({ commit, dispatch }) => {
    return axios.get('/setup/fetch')
        .then((response) => {
            dispatch('base/setLoggedInUser', response.data.user, { root: true })
            commit('setFetishesList', response.data.fetishes)
            commit('setColorsList', response.data.colors)
            commit('setRolesList', response.data.roles)
            commit('setGendersList', response.data.genders)
            commit('setOrientationsList', response.data.orientations)
            commit('setLookingsList', response.data.lookings)
            commit('setSeekingsList', response.data.seekings)
            commit('setBodiesList', response.data.bodies)
            commit('setHeightsList', response.data.heights)
            commit('setEthnicitiesList', response.data.ethnicities)
            commit('setHairsList', response.data.hairs)
            commit('setEyesList', response.data.eyes)
            commit('setPiercingsList', response.data.piercings)
            commit('setTattoosList', response.data.tattoos)
            commit('setSmokingsList', response.data.smokings)
            commit('setDrinkingsList', response.data.drinkings)
            commit('setStatusesList', response.data.statuses)
            commit('setEducationsList', response.data.educations)
            commit('setAgesList', response.data.ages)

        return Promise.resolve(response)
    })
}
*/

export const instantiate = ({ commit, dispatch }) => {
    return axios.get('/setup/fetch')
        .then((response) => Promise.all([
          dispatch('base/setLoggedInUser', response.data.user, { root: true }),
          Promise.resolve(response)
        ]))
        .then(([dispatchResponse, response]) => {
            commit('setFetishesList', response.data.fetishes)
            commit('setColorsList', response.data.colors)
            commit('setRolesList', response.data.roles)
            commit('setGendersList', response.data.genders)
            commit('setOrientationsList', response.data.orientations)
            commit('setLookingsList', response.data.lookings)
            commit('setSeekingsList', response.data.seekings)
            commit('setBodiesList', response.data.bodies)
            commit('setHeightsList', response.data.heights)
            commit('setEthnicitiesList', response.data.ethnicities)
            commit('setHairsList', response.data.hairs)
            commit('setEyesList', response.data.eyes)
            commit('setPiercingsList', response.data.piercings)
            commit('setTattoosList', response.data.tattoos)
            commit('setSmokingsList', response.data.smokings)
            commit('setDrinkingsList', response.data.drinkings)
            commit('setStatusesList', response.data.statuses)
            commit('setEducationsList', response.data.educations)
            commit('setAgesList', response.data.ages)

        return Promise.resolve(response)
    })
}

0👍

There are two main posibilities here:

The first one is that you might not be defining properly the user getter.

The second one, console.log is being executed previous to the data being set by this action:

 dispatch('base/setLoggedInUser', response.data.user, { root: true })

Vuex actions are asynchronous, so setLoggedInUser could have started before the console.log (and the code giving you errors) is executed, but the actual data might not have been received yet at that point (it would be undefined).

If this is the case, add the following condition to the part of the template or the component(s) that are using the block of code where you are getting those errors:

 v-if="user"

This will make Vue to wait for the mapped getter user to have a value to mount said template segment or components, avoiding trying to access properties of undefined.

Leave a comment