vue |
您所在的位置：网站首页 › vuex传值刷新就没了 › vue |
vue
|
需求说明：
在之前写的文章中，vue---将登录成功后后台返回的参数token,id等保存在store中，供其他组件调用 存在问题：当页面刷新后，vuex中的数据被初始化，导致vuex的state丢失。那么如何防止页面刷新后state丢失呢? 解决方案：借助sessionStorage解决上述问题， sessionStorage属性允许在浏览器中存储 key/value 对的数据。 知识点： sessionStorage语法如下： // 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();注意：sessionStorage只能存储字符串类型，因此当需要保存object类型的数据到sessionStorage中，先需要进行序列化。 【 sessionStorage.setItem("loginUserInfo", JSON.stringify(userInfo));】获取数据时，将之前存储的JSON字符串先转成JSON对象再进行操作【 JSON.parse(sessionStorage.getItem("loginUserInfo"));】 本案例将后台传回的token直接保存在sessionStorage中，在axios实例中，当设置headers时，直接从sessionStorage获取。将后台传回的用户数据通过sessionStorage传入vuex中。 （1）登录组件【Login.vue】中，当登录成功后 ①把token直接保存在sessionStorage中； ②通过【 this.$store.commit("setUserInfo", res.data.result.user);】，提交mutation。
（2）①在axios实例中，当设置headers时，直接从sessionStorage获取
在router中【index.js】中加入组件内守卫如下： // 路径"/"为登录路径 router.beforeEach((to, from, next) => { if (to.path == "/") { sessionStorage.removeItem("token"); } let token = sessionStorage.getItem("token"); if (!token && to.path != "/") { next({ path: "/" }); } else { next(); } });②在store中的【index.js】中如下：mutations【setUserInfo】中，通过【sessionStorage.setItem('key','value')】保存用户信息，在getters【loginUserInfo】中，获取用户信息，注意：当页面刷新时，vuex的数据会被初始化，因而需判断，当state中的用户信息为空时，需要从【sessionStorage.getItem('key')】中获取用户信息，不为空则直接返回。
在其他组件中，调用【loginUserInfo】
参考文章： 在vue中使用session Storage和vuex保存用户登录状态MDN Window.sessionStorageVue | 在vue中使用session Storage和vuex保存用户登录状态 |
【本文地址】
今日新闻 |
推荐新闻 |