Объект Vuex показывает ноль в Vue компоненте

Question

В создаваемом приложении у меня есть базовое хранилище для объектов, которые могут использоваться во всем приложении, таких как зарегистрированный пользователь, ошибки проверки и т. Д.

У меня также есть другое пространство имен модули для определенных c разделов моего приложения.

Когда мой родительский компонент загружен, возникает вызов ajax, который извлекает данные и фиксирует их в различных хранилищах.

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)
    })
}

Затем я использую сопоставленные геттеры для доступа к элементам из своих магазинов.

computed: {
    ...mapGetters({
        user: 'base/getUser',
        fetishList: 'setup/getFetishesList',
        localeData: 'setup/getLocale',
        colorsList: 'setup/getColorsList',
        rolesList: 'setup/getRolesList',
        genderList: 'setup/getGendersList',
        orientationList: 'setup/getOrientationsList',
        lookingList: 'setup/getLookingsList',
        seekingList: 'setup/getSeekingsList',
        validation: 'base/getValidationErrors',
    }),
}

Все работает, как и ожидалось, за исключением моего пользовательского объекта.

В моем инспекторе Vue я вижу, что Пользовательский объект должным образом хранится в Vuex, как и ожидалось, но когда я console.log(this.user) получаю значение NULL и каждый раз, когда пытаюсь получить доступ к свойству пользователя, я получаю консольные ошибки.

Может кто-нибудь объяснить, почему это может произойти, я ' Вы никогда не видели этого раньше и понятия не имеете, что я ищу?

Спасибо.

Answer 1

Здесь есть две основные возможности:

Во-первых, вы, возможно, неправильно определяете пользовательский получатель.

Второй, console.log, выполняется перед данные, устанавливаемые этим действием:

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

Действия Vuex являются асинхронными, поэтому setLoggedInUser мог запуститься до того, как будет выполнен console.log (и код, сообщающий об ошибках), но реальные данные могли не быть получено еще в тот момент (оно будет неопределенным).

В этом случае добавьте следующее условие к части шаблона или компоненту (компонентам), которые используют блок кода, в котором вы находитесь получение этих ошибок:

 v-if="user"

Это заставит Vue ждать, пока сопоставленный получатель получит значение для монтирования указанного сегмента или компонентов шаблона, избегая попытки доступа к свойствам undefined.

Answer 2

Я предполагаю, что ваши dispatch() (Vue. js действия ВСЕГДА ожидаются асинхронными c) не завершаются должным образом. Вот как я бы переписал его с одной оговоркой:

Ваше действие base/setLoggedInUser Vuex ДОЛЖНО вернуть Обещание, чтобы это работало должным образом.

/*
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)
    })
}