标签：Vue 登录 绑定 用户 --- 详解 user store 页面

个人中心

1.创建登录页面和个人中心页面并配置路由

   

2.在进入个人中心路由之前，要执行的生命周期函数，判断用户是否登录（判断条件是store中的user中的isLogin）

  

3.配置登录页面样式及获取数据

4.设置对象存储用户账号及用户密码

  

5.获取用户登录验证的api封装并抛出

 

6. v-model绑定phone输入手机号及password输入密码

 

 

 

7.设置点击事件绑定登录按钮，获取输入账号密码。触发store中登录验证phoneCheckLogin的函数

 

 

 8. 异步函数验证用户是否登录成功，判断用户登录，用户登录成功，修改用户的登录状态为true

 

9. 登陆成功进入个人中心页面

10. 获取用户详情的api进行封装并抛出

 

11.获取当前登录用户的详情，将用户详情保存到state的user数据中

    

12.去掉a标签的默认行为，点击事件绑定返回首页

 

 13. 设置个人中心样式并获取数据进行展示

 

14.退出登录点击事件绑定函数logout返回首页

 

15.定义一个函数，用户退出时，删除user中用户登陆数据

 

16.用户退出登录，删除store中user用户登录数据，清空本地存储数据，返回到项目首页

 

 

标签：Vue,登录,绑定,用户,---,详解,user,store,页面
来源： https://www.cnblogs.com/tanghuijun/p/16250881.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。