时间戳

首页 > 解决方案 > Vuex 对象在 Vue 组件中显示为 Null

vue.js - Vuex 对象在 Vue 组件中显示为 Null

问题描述

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

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

当我的父组件被加载时，有一个 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 并且任何时候我尝试访问用户属性时，都会出现控制台错误。

谁能解释为什么会发生这种情况，我以前从未见过，也不知道我在找什么？

谢谢。

标签： vue.jsvuex

解决方案

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

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

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

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

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

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

 v-if="user"

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

推荐阅读