个人中心页面的需求初步分析

1. 个人中心页面需要有已登陆和未登陆两种状态，两种状态用户登陆后所看到的界面也是不一样的
2. 当未登陆时需要有点击登陆/注册就跳转页面的功能
3. 当已登陆时需要有退出登陆，修改个人资料等功能

个人中心页面的搭建和需求中遇到的问题

个人中心静态页面的搭建

• 已登陆的状态

• 未登陆状态

1. 可以看到这个静态页面在两种状态下的静态页面是不一样的，登陆的头部状态不一样，已登陆页面会多一个退出登陆的按钮，所以在搭建静态页面时，我们要全部搭建出来，然后后面再通过if属性来完成判断切换

• 需求技术点：在搭建页面的时候使用了vant组件库的van-image组件，其中有属性可以自动设置图片的形状，van-grid宫格导航组件，有icon属性和text属性可以设置字体图标和文字，这里也是采用插槽的方式来引用我自己定义的字体图标，van-cell单元格组件，具体详情可以查看vant文档

实现登陆页面和未登陆页面的切换

1. 通过对静态页面的分析，当我在已登陆状态，需要显示用户信息的头部和退出登陆按钮，所以需要给这两个标签添加v-if属性，给未登陆状态的头部添加v-else属性‘

• 需求技术点：在做登陆页面时我已经把用户的token值存到了vuex中，所以我只需要通过判断，vuex中是否有token值就可以知道用户是什么状态，我使用了vuex封装的语法糖，mapState，在计算属性中使用展开运算符的方式拿到user的值，作为v-if的判断条件，就可以根据用户的状态切换到相对应的页面

 <!-- 已登录头部 -->
    <div v-if="user" class="header user-info">
    </div>
     <!-- 未登录头部 -->
     <div v-else></div>
  <script>
  //导入mapState
  import { mapState } from 'vuex'
  export default{
  computed:{
  ...mapState(['user'])
  }
  }
  </script>
     

发起网络请求获得用户信息

1. 封装一个获得个人用户信息的网络请求接口

import request from "@/utils/request";
// 获取用户个人信息
export const getUserInfo = () => {
    return request({
      method: 'GET',
      url: 'v1_0/user',
    })
  }

2:在created钩子函数中发起网络请求，这里做了一个小判断，在确认用户是已经登陆的状态时再发起请求

async created() {
     if(this.user){
      try {
        const { data } = await getUserInfo()
        this.userInfo = data.data
      } catch (err) {
        console.log(err)
        this.$toast('获取数据失败')
      }
     }
  },

3.将请求到的数据通过插值语法渲染到页面中

点击退出登陆按钮，手动退出登陆状态

1. 给登陆按钮绑定一个点击事件

• 需求技术点1：这里需要用到vant组件库的提示dialog组件，因为采用的是全局引用所以需要使用this.$dialog的方式调用，这里我们调用了组件的异步关闭弹窗方式，调用了this.$dialog.confirm（）这个方法，该方法是一个promise函数，所以可以在.then和.catch中写逻辑代码
• 需求技术点2:退出登陆界面其实就是改变判断条件，所以还是需要手动的改变vuex中user属性的状态，这里我把它设为0也就是false状态，同时手动清空本地存储中的数据，就可以改变界面状态为未登陆

onLogout() {
      // 退出提示
      // 在组件中需要使用 this.$dialog 来调用弹框组件
      this.$dialog.confirm({
        title: '确认退出吗？'
      }).then(() => {
        // on confirm
        // 确认退出：清除登录状态（容器中的 user + 本地存储中的 user）
        // 在这里手动的切换vuex中的user值 改为false属性 完成v-if切换
        this.$store.commit('setUser', 0)
        localStorage.removeItem('toutiao_user')
      }).catch(() => {
        // on cancel
        console.log('取消执行这里')
      })
    }