项目背景：首先介绍一下，项目中用了vuex;
从前端页面来讲，如果登录表单的内容验证都通过之后，当我们点击登录按钮的时候向后台发送请求，请求成功后，后台会给我们返回信息，其中信息会有sessionStr和sessionId等个人标识（我的理解是后台根据这个sessionStr和sessionId在control层或者其他层来写登录的人的个人信息）所以当我们点击退出的时候，一般会像后台再发送一个协议，协议中会包括sessionStr和sessionId。以上是我对逻辑功能的大致理解，好了上代码吧；
首先项目中实现的效果是登录之前头部只展示登录和注册登录之后头部展示个人账号，资产,订单和退出等。既然是在登录成功之后头部组件的样式发生变化，那么提交给mutation(vuex)的内容则应该在登录组件中写。
文章图片
登录成功后将userId,sessionStr和tel提交到vuex这样我在头部的组件也可以用
文章图片
文章图片
将session信息存到locolStorage里面（写到这时，我想有些人会想，为什么要存到locolstorage中，理由是如果不存到locolstorage里，刷新页面的时候，vuex会清空数据，所以存到locolstorage里面）
文章图片
好了下面就是页面上的应用了：
在header组件中应引入
文章图片
页面上的判断是
文章图片
写到这里已经完成了头部组件的样式改变，接下来就是点击退出时我们应该做的：
文章图片
点击退出，我们要给后台发送这个人的session信息；并且我们要讲页面头部样式换回以前的登录和注册，所以此时提交setSessionInfo的信息为空
【vue项目登录成功后退出时清空sessionId和userId的个人理解】个人理解，如有跑偏希望大佬们多多指点
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例