个人中心页面交互实现

1、未登录与登录页面的展示

1.获取用户登录的状态---从vuex容器中 只要判断是否有user即可

把容器中的数据映射到当前组件中----通过...mapState(['属性名'])获取，这样就可以像访问当前组件的数据一样方便，出现下面的界面就说明数据从vuex中传进来了

2使用数据----v-if=“user” --- 已经登录

v-else-----未登录

注意： 当页面中使用vuex中的数据较多时，推荐使用mapState映射数据

反之也可以$store.state.属性名

  <span class="text">{{$store.state.user ? '我的' : '未登录'}}</span> 

 @退出登录

  <van-cell v-if="user" title="退出登录"

    class="layout-cell"

    @click="onLoadOut"/>

 退出提示--vant--Dialog

Dialog.confirm({ title: '标题', message: '弹窗内容', })

.then(() => { // on confirm })

.catch(() => { // on cancel });

 methods: {
    onLoadOut() {
      //推出提示
      //在组件中需要使用this.$dialog来调用弹框组件
     this.$dialog.confirm({
        title: "确认推出吗?"
      })
        .then(() => {
          // on confirm 确认退出:清除登录状态（容器中的user + 本地存储中的user）
          //console.log('确认执行这里')
          this.$store.commit('setUser',null)
        })
        .catch(() => {
          // on cancel
          console.log('取消执行这里')
        })
      
    },
  },

展示登录用户的信息

封装接口--请求获取数据--模板绑定

// 获取用户自己的信息

export const getUserINfo = () => {

    return request({

        method: 'GET',

        url: `/v1_0/user`,

        //发送请求头数据

        headers: {

            //注意：该接口需要授权才能访问 Bearer后面有一个空格不能省

            Authorization: `Bearer ${store.state.user.token}`

        }

    })

}

 按需加载

 import { getUserINfo } from '@/api/user'

在data中初始化一个对象用来存放用户的信息

data() {

    return {

      userInfo: {} //用户信息

    };

  },

在created中加载数据

created() {

    //如果用户登录了，则请求加载用户信息数据

    if(this.user){

      this.loadUserInfo()

    }

  },

  methods: {

     async loadUserInfo () {

     try {

       const { data } = await getUserINfo()

       this.userInfo = data.data

       console.log(data)

     } catch (err) {

       this.$toast('获取数据失败，请稍后重试')

     }

    }

  },

把数据更新到组件中 this.userInfo = data.data

将数据绑定到试图中

<div class="my-container">
    <!-- 已登录头部 -->
    <div v-if="user" class="header user-info">
      <div class="base-info">
        <div class="left">
          <van-image
            :src="userInfo.photo"
            class="avatar"
            round
            fit="cover"
          />
          <span class="name">{{userInfo.name}}</span>
        </div>
        <div class="right">
          <van-button size="mini" round>编辑资料</van-button>
        </div>
      </div>
      <div class="data-stats">
        <div class="data-item">
          <span class="count">{{userInfo.art_count}}</span>
          <span class="text">头条</span>
        </div>
        <div class="data-item">
          <span class="count">{{userInfo.follow_count}}</span>
          <span class="text">关注</span>
        </div>
        <div class="data-item">
          <span class="count">{{userInfo.fans_count}}</span>
          <span class="text">粉丝</span>
        </div>
        <div class="data-item">
          <span class="count">{{userInfo.like_count}}</span>
          <span class="text">获赞</span>
        </div>
      </div>
    </div>
    <!-- /已登录头部 -->

    <!-- 未登录头部 -->
    <div v-else class="header not-login">
      <div class="login-btn" @click="$router.push('/login')">
        <img class="mobile-img" src="~@/assets/mobile.png" alt="" />
        <span class="text">登录 / 注册</span>
      </div>
    </div>
    <!-- /未登录头部 -->
    <!-- 导航  这个组件默认一行四个 但希望2个--自定义列数-->
    <van-grid :column-num="2" class="grid-nav" clickable>
      <van-grid-item class="grid-item">
        <i slot="icon" class="toutiao toutiao-shoucang"></i>
        <span slot="text" class="text">收藏</span>
      </van-grid-item>
      <van-grid-item class="grid-item">
        <i slot="icon" class="toutiao toutiao-lishi"></i>
        <span slot="text" class="text">历史</span>
      </van-grid-item>
    </van-grid>
    <!-- /导航 -->
    <!-- 消息通知 小智同学 推出登录 -->
    <van-cell title="消息通知" is-link />
    <van-cell title="小智同学" is-link class="md9" />
    <!-- 因为退出登录是水平居中 所以给它设置单独的样式 -->
    <van-cell
      v-if="user"
      title="退出登录"
      class="layout-cell"
      clickable
      @click="onLoadOut"
    />
  </div>

如果较多接口需要授权，可用请求axios拦截器来统一设置