首次加载页面子组件获取不到vuex里的值或者sessionStorage里的值

很正常的一个需求:
页面首次打开到首页,在首页做是否登录的判断,如果存在cookie则自动登录,然后把token,status…等一些值存储到vuex中,首页头部我封装成组件了,然后头部里的一些内容展示是根据vuex里的值或者sessionStorage里的值去判断的。如图:
在这里插入图片描述
其实在里面还有一些内容的

html:
<div class="userCenter_top">
  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="userCenter_top_avatar">
  </el-avatar>
  <img src="../assets/nav/brand.png" alt="" v-show="isAttestation" class="userCenter_top_img">
  <span class="userName">姜丝牛肉</span>
  <span class="prove" v-show="attestationStatus === 2">(已认证为{{this.$store.state.cusType|cusType}})</span>
  <span class="proveing" v-show="attestationStatus === 1">认证中...</span>
  <span class="noProve" v-show="attestationStatus === 0">(尚未认证,去认证)</span>
</div>
js:
data () {
	return {
		attestationStatus: parseInt(sessionStorage.getItem('status')),
	}
}

控制台打开sessionStorage是可以看到有值的,但是打印出来是NaN
在这里插入图片描述
首页在调用登录接口打印是ok的,但是在头部组件是还拿不到的,所以我想了另一种办法,就是父传子,在父组件登录成功拿到值后存储并且传给头部组件,这样头部组件就能实时的拿到值并且相应的展示了。
父组件:
在这里插入图片描述
在这里插入图片描述
子组件:

在这里插入图片描述
首次打开页面,在头部子组件中就能获取到值了。正确展示为如图:

在这里插入图片描述
做生活的欣赏者,才能看到更多美好的风景!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值