一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--退出功能实现及优化
advertisement

使用vue全家桶高仿小米商城--退出功能实现及优化

退出登入其实很简单,首先请求退出登入的接口,同时清空cookie、username和购物出(count)的值(因为这些值是前端渲染的),操作如下:
1、NavHeader.vue页面内加退出登入按钮:

2、编写logout方法,如下图所示:

退出登入功能实现后存在的问题:在登入的时候购物车里面有数据,当退出登入的时候把存储在vuex中的购物
车数量清空了,因此在退出登入前需要先获取购物车数量传给二次登入
解决方法:再次请求购物车接口重新获取购物车数量(存在资源浪费),如下图所示:


优化登入处理(防止跳转到首页后购物车数量sum接口请求多次)
操作如下:
1、login.vue页面:

2、NavHeader.vue页面(如果是从登陆页面跳转到首页的才请求购物车接口):

优化登入时候获取用户名和购物出数量(之前是直接请求,不区分是否登入)图一是未优化,图二是优化后:

图一


 
图二
将cookie过期时间设置为浏览器cookie有效期时间,如下图所示:
zhangren.online
上一篇:使用vue全家桶高仿小米商城--处理安装ElementUI依赖报错
下一篇:使用vue全家桶高仿小米商城--订单父组件结构封装

您可能喜欢

回到顶部