【Vue3】用户基本信息获取&渲染

1. api/user.js封装接口

export const userGetInfoService = () => request.get('/my/userinfo')

2. stores/modules/user.js 定义数据

const user = ref({})
const getUser = async () => {
  const res = await userGetInfoService() // 请求获取数据
  // 一定要养成根据接口文档写结果的习惯，否则每次打印效率太低了
  user.value = res.data.data
}

3. layout/LayoutContainer页面中调用

import { useUserStore } from '@/stores'
const userStore = useUserStore()
// 一进页面就调，或者放在生命周期周期钩子里也可以，放在外面就相当于在created里发请求
onMounted(() => {
  userStore.getUser()
})

4. 动态渲染

<div>
  黑马程序员：<strong>{{ userStore.user.nickname || userStore.user.username }}</strong>
</div>

<el-avatar :src="userStore.user.user_pic || avatar" />