VUE框架中登陆后刷新用户丢失问题

最新推荐文章于 2022-12-03 15:31:30 发布

James_F

最新推荐文章于 2022-12-03 15:31:30 发布

阅读量494

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/James_F/article/details/115443382

版权

在Vue项目中遇到登录后刷新导致用户信息丢失的问题，通过检查发现未正确使用存储的值。解决方法包括在store的getter中处理，以及在登录后组件中正确调用和赋值。

摘要由CSDN通过智能技术生成

VUE框架中登陆后刷新用户丢失问题

之前用vue写了拦截器，但一刷新登录用户就没了，搞了一会儿才发现是没对存储的值进行判定使用；淦

store文件夹下的index.js中的getter：

getters: {
   
  users:state=>{
   
  //判定获取后的值是否为空值，
    if(!state.users){
   
    //获取新的值返回
      return JSON.parse

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

James_F

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决vue项目刷新页面后用户名数据丢失

qq_45888887的博客

04-29

1663

项目场景：使用vue开发时候遇到的问题：用户登录后获取用户名，并显示在页面上，刷新页面后会出现用户名数据丢失情况。问题描述用户登录后获取用户名，并显示在页面上，刷新页面后会出现用户名数据丢失情况。原因分析：查询资料发现，是刷新页面后VUEX中的store中数据会被清除。vuex中的store是用来存储组件状态的。刷新页面时，vue实例重新加载，store会被重置。所以，一些不应该被重置的数据，应该使用本地存储来进行存储。解决方案：使用本地存储。过程（补充了Vuex的简单使用教程）：

vuex页面刷新后数据丢失的方法

12-11

1. 原因（1）js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。（2）刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。（3）要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。 2. HTML5提供的2种客户端存储数据的新方法 localStorage存储数据：（1）存储的数据是永久性的，永不过期；（2）作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据（不论该源

参与评论您还未登录，请先登录后发表或查看评论

【已解决】Vue 刷新后用户名消失，store数据丢失

还有很长很长的路

12-08

2508

利用本地存储，解决问题Vue 刷新后用户名消失，store数据丢失

解决vue页面刷新，数据丢失

admin12345671的博客

03-13

244

解决vue页面刷新，数据丢失来源 | https://www.cnblogs.com/tp51/p/14026035.html 在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：解决方法一：最先想到的应该就是利用localStorage/sessionStora

Vue 页面刷新，状态数据丢失问题

sinat_36539161的博客

11-07

9302

在开发过程中发现，Vuex 状态值存在页面刷新，数据丢失情况。具体：在登陆页成功登陆，将用户信息保存到 Vuex，跳转至首页，首页显示用户信息，再刷新首页，vuex中保存的数据会丢失！原因：store里的数据是保存在运行内存中的，当刷新页面，以前的内存被释放，重新加载脚本，store里面的数据就会被重新赋值。解决方法：将state里的数据保存一份到本地存储。在登陆页面传数据 ...

vue单页面应用刷新网页后vuex的state数据丢失的解决方案

赵天铭的博客

08-06

5万+

最近在用vue写pc端项目，用vuex来做全局的状态管理，发现当刷新网页后，保存在vuex实例store里的数据会丢失。 1. 产生原因其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。 2. 解决思路一种是state里的数据全部是通过请求来触发action或mutation来改变一种是将state...

解决Vue中父子传值数据丢失问题

10-16

然而，在使用过程中，开发者可能会遇到页面刷新后子组件接收的父组件数据丢失的问题。这个问题的解决方法是在子组件的watch属性中监听数据变化，然后重新对数据进行处理。这通常涉及到数据的深拷贝，以避免在更新...

vue路由传参页面刷新参数丢失问题解决方案

m0_69940800的博客

05-04

5581

方法二：路由属性配置传参： this.$router.push({ name:“/admin/${item.id}”, }) //这个组件对应的路由配置 { //组件路径 path: ‘/admin:id’, //组件别名 name: ‘admin’, //组件名 component: Admin, } 通过路由属性配置传参我们可以用this.route.params.id来获取到id的值，注意this.route.params.id来获取到id的值，注意this.route.params.id来获取到id

通过接口登录后进入个人中心页面，刷新数据丢失(Vuex获取的数据刷新后消失)

W_4ever的博客

06-04

349

vuex获取通过aioxs请求赋值的数据刷新后丢失

vuex登录状态刷新页面状态消失解决办法

zax533716144909的博客

07-22

1519

vue项目中记录登陆状态使用vuex 但是有一个缺点就是每次刷新页面状态都会消失 app.vue data () { return { islogin:null, } }, // 组件创建之前 created:function() { //在页面加载时读取sessionStorage里的状态信息如果有的话就存进vuex里面 if (sessionStorage.getItem("storedata") )

vue实现登录功能，且刷新页面不丢失数据

otatoz

02-17

4401

仅个人学习记录 github：https://github.com/otatoz/login-vue 预览地址：http://47.93.255.92/login 项目说明：姓名: customer1或customer2或customer3 密码: 123321 目录结构：大致流程：代码说明： store/modules/log...

Vuex状态刷新状态丢失的处理方法

hanq2016的博客

08-03

1888

Vuex状态刷新状态丢失的处理方法

vuex刷新页面丢失登录的token信息的解决方案

黄钢的博客

09-19

3万+

最近真的是和这个token给干上了，被这个token验证搞的非常无语了抓狂了一整天，还是解决了，貌似解决了，记录一下。

Vue刷新后页面数据丢失问题的解决过程

不定时分享最优质的网络技术与教程，满满的干货。

12-03

6361

在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失,这篇文章主要给大家介绍了关于Vue刷新后页面数据丢失问题的解决过程,需要的朋友可以参考下！值得注意的是：Vuex ----状态管理模式 + 库相当于共享仓库，方便任何组件直接获取和修改。state - 数据【存项目共享状态，是响应式的，store的数据改变，所有依赖此状态的组件会更新】$store.state.countmutations - 方法【同步函数，只建议在这个地方修改数据】inc(state, 参数

vuex中利用缓存解决刷新state数据丢失问题

Whoopsina的博客

03-05

1205

在使用vuex的过程中，经常会遇到刷新页面时state中数据丢失，此时可以利用本地缓存解决注意：实例代码为uniapp项目，可以将缓存方法转换为原生 //在index.js中 state: { userInfo: null }, getters:{ userInfo(state) { if(!state.userInfo){ state.userInfo = uni.getStorageSync('userInfo'); } return state.userInfo } },

解决vuex页面刷新数据丢失

博客

11-29

701

//全局监听，页面刷新的时候将store里state的值存到sessionStorage中，然后从sessionStorage中获取，再赋值给store。然后再把session里面存的删除即可，相当于中间件的作用。 //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$...

Vue项目保持用户登录状态（localStorage + vuex 刷新页面后状态依然保持）