如何在 Vue 的生命周期中显示来自 Vuex 存储的数据答案

【问题标题】：How to display data from Vuex store in life time in Vue如何在 Vue 的生命周期中显示来自 Vuex 存储的数据
【发布时间】：2022-01-08 02:01:31
【问题描述】：

我想显示来自 Vues 商店的数据。所以首先我想检查身份验证是否为真，如果是，我想显示来自 Vuex 的数据。这是我的简码：

<li v-if="authenticated">
                            Hello, {{ getUser.attributes.first_name }}
                        </li>


computed: {
    getUser() {
        console.log(this.$store.state.user)
        return this.$store.state.user;
    }
},

但是我收到了如下图所示的错误，您认为这是为什么？为什么先对象变空，然后对象被填充？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex vue-router

【解决方案1】：

向v-if 指令添加条件，因为在第一次渲染时attributes 属性不可用：

<li v-if="authenticated && getUser.attributes">
    Hello, {{ getUser.attributes.first_name }}
</li>

【讨论】：