目的
上一节,我们成功获取到了用户的数据并存储到了vuex中,接下来,我们需要在Header.vue中读取数据并展示到页面上。
项目地址:https://github.com/cctyl/sunofbeach_mobile.git
读取vuex,首先导入mapState,然后在computed中使用
import {mapState} from 'vuex'
export default {
name: "Header.vue",
computed: {
...mapState(['userInfo'])
},
}
这样就取出了userInfo数据,页面中可以直接通过这个变量来调用userInfo
页面
我们先看下目标效果
这个头像有两部分,一部分是图片,一部分是右上角的小红点。
这两个部分nutui都提供了组件,分别是
头像 https://nutui.jd.com/2x/#/avatar
红点 https://nutui.jd.com/2x/#/badge
结构是,外面是红点,里面是头像
具体如下
<nut-col :span="3">
<div v-if="!userInfo" class="flex-content loginText" @click="toLogin">登录</div>
<nut-badge
v-else
top="5px"
right="18px"
:isDot="true"
class="item"
@active-avatar="toUserInfo"
>
<nut-avatar
class="user-avatar"
bg-icon
:bg-image="userInfo.avatar"
></nut-avatar>
</nut-badge>
</nut-col>
这样结构就有了,剩下就是调整样式让他更好看,下面是我自己调整的样式
.user-avatar {
width: 25px;
height: 25px;
margin-left: 12px;
margin-top: 5px;
}