localStorage + Vuex 保存用户信息

在我们***项目中，使用了Vue前端框架，由于某些页面（比如最近的秋季抽奖主题以及玩家社区评论页面和点赞页面）需要用户登录才能进行签到、抽奖、评论和点赞等功能。一般像这样的用户信息一般都是存在Vuex里面，因为Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。但是Vuex虽然能存储状态，但是一旦页面刷新，用户状态也随之刷新消失，如果想要用户状态不会因为刷新而消失，这里便要用到本地存储了。因为localStorage解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，相当于前端页面的数据库。

在万岁爷官网中采用了localStorage + Vuex结合来保存用户信息，Vuex结构如下图1。

图1 Vuex结构图

在本项目中，我单独将localStorage放在一个js里面，在有需要的时候可以调用，如图2。

图2 localStorage.js

This.get是读取localStorage里面的数据，this.set是将数据存入localStorage，this.clear清除localStorage里的数据。

如果需要调用localStorage，则可以在需要调用的文件里面引入localStorage。如图3。

图3 user_login.js

图4 user_login.js里面的state和getters  

图5 user_login.js里面的mutations和actions  

存储基础信息，将传入的data赋值给state.user_datas,然后将state存入localStorage.user_info。

清除localStorage里面的数据，可以将state.user_datas设置为空值，然后将空值存入localStorage.user_info。这样localStorage里面的数据就为空。这个在登出网站的时候可以用到。

图6 登录

在登录网站的时候，在请求用户数据后，利用this.$store.commit将请求到的数据存入localStorage。存入localStorage里面的信息如果不手动删除是会一直存在的，可以在整个项目里直接调用。如图6。

图7 登出

在登出网站的时候，直接this.$store.commit(‘CLEAR_BASEINFO’)。即可删除localStorage里面用户的状态信息。如图7。

图8登录后的localStorage.uesr_datas  

图9效果图

图10登出后的localStorage.uesr_datas

好了，就这样~