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

Posted 2023-02-16

【中文标题】如何在 Vue 的生命周期中显示来自 Vuex 存储的数据

【英文标题】：How to display data from Vuex store in life time in Vue

【发布时间】：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;
    
,

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

【参考方案1】：

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

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