Vuex 对象在 Vue 组件中显示为 Null

Question

在我正在创建的应用程序中，我有一个基础商店，用于存储可能在整个应用程序中使用的对象，例如登录用户、验证错误等。

我的应用程序的特定部分还有其他命名空间模块。

当我的父组件被加载时，有一个 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)
    })
}

然后我使用映射的 getter 来访问我的商店中的项目。

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

我的猜测是您的 dispatch()（Vue.js 操作总是被认为是异步的）没有正确完成。这就是我将用一个警告重写它的方式：

您的 base/setLoggedInUserVuex 操作必须返回一个 Promise 才能正常工作。

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

Answer 2

这里有两个主要的可能性：

第一个是您可能没有正确定义用户 getter。

第二个，console.log 在此操作设置的数据之前执行：

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

Vuex 操作是异步的，因此 setLoggedInUser 可以在执行 console.log（以及给您错误的代码）之前启动，但此时可能尚未收到实际数据（它将是未定义的）。

如果是这种情况，请将以下条件添加到模板部分或正在使用您遇到这些错误的代码块的组件：

 v-if="user"

这将使 Vue 等待映射的 getter 用户有一个值来挂载所述模板段或组件，避免尝试访问未定义的属性。