【前端】【Vue】【vue初学之刷新页面数据消失（store数据丢失）】

已于 2022-09-30 17:08:22 修改
阅读量3.3k 收藏 2
点赞数
分类专栏： 前端 文章标签： 前端 vue
于 2020-04-23 16:19:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39248747/article/details/105710274
版权

【前端】【Vue】【vue初学之刷新页面数据消失（store数据丢失）】

一、问题解释

第一次打开页面，会获取不到数据，关闭后再打开，第二次就获取到了数据，而且当点击刷新时，数据也会消失

二、原因

store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了

三、解决方法

利用coputed计算属性
原理：computed是基于他们响应式依赖进行缓存的，只有相关响应式依赖发生改变时才会从新求值
在这里插入图片描述
不要直接赋值
在这里插入图片描述

时光与简
关注
专栏目录
Vuex刷新数据消失问题
独滕的博客
05-06 386
Vuex刷新数据消失问题 问题产生的原因： 因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。 解决方案 所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session等浏览器提供的API中，可以将数据存储在硬盘上，做持久化存储。HTML5提供了2种在客户端存储数据的新方法：localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限。 之前，这些都是由
vue页面刷新后store内的数据清空
weixin_54386178的博客
03-24 2129
vue页面刷新后store内的数据清空 解决方法： app.vue中加入 created () { // 在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem('store')) { this.$store.replaceState( Object.assign( {}, this.$store.state, JSON.parse(sessionS
Store刷新数据丢失解决方法
u014414161的博客
09-09 2808
Store刷新数据丢失解决方法
解决 Vuex Store 数据在页面刷新后丢失的方法
最新发布
m0_67793437的博客
08-14 1075
Vuex Persistedstate 是一个强大且易于使用的插件，能够帮助我们在 Vue.js 应用中持久化 Vuex store 的状态。通过灵活的配置项，你可以根据需求定制状态的持久化方式，满足不同的业务场景。通过以上方法，我们可以有效地解决 Vuex store 数据在页面刷新后丢失的问题。根据不同的需求和场景，选择合适的持久化方案。如果需要快速简便的解决方案，可以使用插件；如果需要更大的存储空间和更复杂的数据结构，是一个不错的选择。
解决vue页面刷新，数据丢失【store】
weixin_44995829的博客
02-16 3632
解决vue页面刷新，数据丢失【store】
vue 刷新页面的时候 store的值被清除
challenglistic的博客
09-23 735
vue 刷新页面的时候 store的值被清除
VUE2页面刷新解决store数据丢失的问题
qq_39196447的博客
01-23 1545
监听 beforeunload 这个方法，beforeunload 在页面刷新时触发，监听 beforeunload 让页面在刷新前将数据存到 sessionStorage 中。然后，在页面刷新时，读取 sessionStorage 中的数据到 store 中。刷新页面时，vue实例重新加载，从而，store也被重置了。localStorage: 是永久存储，浏览器关闭后数据不会丢失，除非主动删除数据。系统登录后获取到用户权限存入store中，发现在刷新页面之后，store中的权限数据丢失了。
关于vue3刷新页面后，数据丢失问题
SeverusYang的博客
06-12 3695
一开始解决，思路大概是将数据存储到piniaStore中，但是interesting，刷新页面Store照样清空刷新，它并不是一个永久存在的仓库。本文重点解决刷新页面数据丢失的问题，一般情况下，调试过程中，数据会变空；这对于敏感信息如用户的登录状态和访问令牌是很重要的，因为它们应该在用户结束会话后立即失效。这使得它适合存储持久化的数据，如用户的偏好设置和本地缓存的数据，以便在用户下次访问网站时仍然可用。对于服务器返回的用户登录信息（用户名、密码、token等），一般建议将敏感信息存储在客户端的。
前端VUE实战——去哪儿网项目实战.7z
08-17
组件是Vue中最强大的特性之一，允许我们将UI拆分为可复用的部分，每个部分都有自己的视图和数据逻辑。在这个去哪儿网项目中，我们可能看到各种组件的运用，如搜索框、导航栏、列表展示等。 虚拟DOM是Vue提高性能的...
仿京东到家H5前端vue源码.zip
04-24
【标题】"仿京东到家H5前端vue源码.zip"揭示了这是一个使用Vue.js框架构建的、模仿京东到家H5页面的前端项目。Vue.js是目前非常流行的一个JavaScript库，尤其适合构建用户界面。它以其轻量级、易上手、组件化开发的...
前端Vue启动指南1
08-08
一般来说，Vue项目中的`src`目录包含主要的源代码，如`components`存放可复用的Vue组件，`views`存放路由对应的视图，`router`定义应用的路由，`axios`或其他网络请求库用于数据交互，`store`（如果使用Vuex）管理...
vue 界面刷新数据被清除 localStorage的使用详解
12-03
localStorage是html5新增的一个本地存储API,它有5M的大小空间,通过(key,value)的方式存储在浏览器中 window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件 vue中使用方法： 1、新建一个store.js文件 localStorage只能存储字符串，非字符串的数据在存储之前会被转换成字符串。在存储一些复杂数据类型时可能有些麻烦,下面方法是先使
解决vue刷新页面以后丢失store的数据问题
10-14
主要介绍了解决vue刷新页面以后丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2022大创项目 前端部分 vue
03-07
在这个项目中，Vue将作为主要的前端技术栈，用于构建动态、交互式的网页应用。 【描述】提到的是2022年的一个大学生创新创业项目，其前端部分选择了Vue.js。这表明项目团队可能在追求高效的开发流程和良好的用户...
vue兄弟组件传递数据的实例
10-18
Vue.js是目前非常流行的前端JavaScript框架，它主要用于构建用户界面。组件是Vue.js的核心概念之一，允许开发者构建可复用的代码块。在Vue.js中，组件之间的通信是一个非常重要的主题，特别是兄弟组件之间的数据传递...
解决VUE中页面刷新之后STORE中数据丢失问题
iSoaringUp的博客
08-18 5824
解决VUE中页面刷新之后STORE中数据丢失问题
Vuex遇到浏览器刷新，store里存的数据还在吗？
xingyu_qie的专栏
06-17 822
我们在做Vue前端项目的时候，很可能会使用Vuex来做一些状态或者数据管理，希望在一定程度上，不发送网络请求，不经过密集的组件数据传输，也可以达到数据共享的目的。但如果浏览器页面刷新了，Vuex中store里存的数据还存在吗？
vuex在页面刷新后数据被清除
Yo,的博客
03-07 3922
vuex在页面刷新后数据被清除的问题 最近在用vue写pc端项目，用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失 1. 产生原因 其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。 2. 解决思路 一种是state里的数据全部是通过请求来触发action或mutation...
vuex中store保存的数据，刷新页面会清空解决办法
qq_41549657的博客
05-03 622
参考下面这篇博文，在自己的csdn引用是为了自己日后方便寻找 https://www.jianshu.com/p/9d805d749456
Vue.js与Vuex构建高效单页应用：实战教程与关键知识点
3. Vue Router的使用：用于路由管理，使得单页应用能够处理页面跳转和导航。在Vuex中，可以将路由相关的状态存储在store中，确保全局可见并易于管理。 4. ES6语法：文章建议初学者熟悉ES6的语法，例如箭头函数、let...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值