https://www.jianshu.com/p/b2b634c77502
最近做项目需要保存用户登录状态，要做到刷新页面用户状态不变，以及实现登出功能。实际上是很简单的，但是对于vue新手来说，我找了好几个网址都讲的不是很清楚，磕磕绊绊理清了关系，在这里总结一下。
首先，vuex安装完成之后，构建如下目录：
vuex目录结构
这样做的目的是降低代码的耦合度，方便以后的修改与维护。
然后，vuex中几个文件详情如下：
store.js
在store.js中目前保存三个数据，一个是当前用户，一个是判断当前用户是否已经登录，最后一个是保存用户登录后持有的token。实际上token也可以不保存在vuex中，因为vuex是一个状态管理器而非一个存储工具。我在axios的headers里是直接用的sessionStorage里的token。
getters.js
mutations.js
actions.js
接下来，在用户登录的时候，我们就需要将用户名和token存放入sessionStorge，再由sessionStorage传入vuex中。
如上图，在登录成功之后，执行红框中的两个操作，就实现了上述的功能。vuex的dispatch和commit方法是有区别的，这个区别下一篇我们再详细讲。sessionStorage的setItem和getItem是一对，语义上就可以理解用法，不多说。将用户名放入vuex，调用setUser即执行actions.js中的方法来改变状态，则进入mutations.js中的userStatus方法，最终实现改变store.js中的三个状态。
那么其实到这里，已经实现了将用户的状态，即用户名和token放入sessionStorage中的要求了。
下一个问题是，在刷新页面的时候，如何获取这个状态呢？
未登录状态
已登录状态
首先要知道，vuex中的状态一旦页面刷新，就不再存在。所以为了实现在刷新页面时，仍然展现出用户头像，就需要从sessionStorage种提取状态再传值给vuex。
html代码
computed里的isLogin()
每当刷新页面的时候，就会从sessionStorage中查询是否有userName和token的存在，如果存在，则改变vuex中的isLogin，即用户状态，最后return一个isLogin()。这样就实现了保存用户登录信息的功能。
最后，再来说说登出功能。要明白一个逻辑，用户登录之后，如果再次回到登录界面，必然是执行了登出操作。所以直接在login.vue里加一个路由控制就可以了。
login的组建内守卫
登出也就是将sessionStorage里的userName和token清空，就不多说了。
这篇博客还有比较多不足的地方，欢迎大家指正。
2018/12/11 补充：
之前一段时间面临大四找工作， 偶尔登录简书看一下。 留言看到很多初学者还是不明白代码怎么写， 在这里贴出我gitee这个项目地址。首先这是我第一个vue项目， 有很多不成熟的地方， 而且后台接口现在已经关闭，所以我屏蔽了ip地址和端口号， 现在给出地址， 不会的旁友们可以自己去看。
https://gitee.com/beautzy/mooc