vue3 中 vuex 页面刷新数据丢失解决方案

最新推荐文章于 2024-05-02 14:26:53 发布
最新推荐文章于 2024-05-02 14:26:53 发布
阅读量916 收藏 3
点赞数
分类专栏： 其他  系统操作 vue3 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51614564/article/details/126346742
版权

1.借助插件：（可以使数据持久化存储）

 npm install vuex-persistedstate

2.在vuex 根模块里面引用这个插件

 3.这样做的唯一不好的会把vuex  里面的数据都保存下来。

要成为光的女人
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex刷新后数据丢失的解决方法
01-18
导语： 我们在写vue项目的时候，经常要用到vuex作为内存来储存，但是我们存放在vuex中的数据（用户数据，当前页面的数据等等）在刷新后就会丢失，那么如何解决呢？超级简单。 1，安装vuex-persistedstate npm install --save vuex-persistedstate 2，修改store import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ state: { user: {}, //用户 }, mutations: { updat
关于页面刷新vuex数据丢失的问题
萧萧的博客
02-09 4437
为什么说刷新页面vuex的数据会丢失 刷新页面vuex的数据会丢失属于正常现象，因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。 第一种方法用sessionStorage 将接口返回的数据保存在vuex的store里，也将这些信息也保存在sessionStorage里。注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage
vue项目 三种解决vuex页面刷新数据丢失的方法【2021-08-19】
指尖笑
10-27 5132
1、问题描述： 一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。 2、解决办法： （1）、分析： 定义刷新前把store存入本地localStorage、sessionStorage、cookie中。 localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，不断触发l
vuex页面刷新数据丢失问题的四种解决方式
频繁记录
08-24 5612
vuex页面刷新数据丢失问题的四种解决方式
Vue3页面reload刷新后导致缓存页面数据丢失
trabecula_hj的博客
10-26 1777
如何解决reload刷新页面导致缓存页数据丢失的问题
解决vue页面刷新，数据丢失的问题
PILIpilipala的博客
02-01 2126
在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失。 出现这个问题的原因是：因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了， 解决方式如下： 方法一：利用localStorage/sessionStorage将数据储存在外部，做一个持久化储存 方案1： 由于state中的数据是响应式的，而数据又是通过mutation来进行修改，故在通过mutation修改
vue3 关于使用vuex做状态管理，页面刷新后数据丢失解决办法
weixin_46466247的博客
05-21 3122
数据丢失原因 使用vuex通常会遇到页面刷新后数据丢失的问题。原因是页面刷新后浏览器会重新加载页面相关的组件，vuex的存储的状态当然也会被初始化，所以就造成了数据丢失。也就是vuex并不能做数据的持久化存储，只是在内存中创建个临时仓库。 解决方式 使用其他存储方式 Cookiess 可以将数据存储在Cookies中，但是Cookies大小被限制（各浏览器限制大小可能不同），不适合存储大数据。 LocalStorage 本地存储，直接将数据存到硬盘。不手动删除不会被清理。 SessionStorage 会
vue解决页面刷新丢失问题
zzll1216的博客
09-01 720
query传递的参数为数组，当页面刷新的时候会变成`[obj boj]`,这个时候我们把query传递的参数转换成字符串格式的
解决 vue-admin刷新页面,页签 TagsView 丢失问题
疑问 搜索 动手 解决 记录
08-10 2460
复制下面的代码 // 解决 vue-admin-template 刷新页面 TagsView 丢失问题 beforeUnload() { // 监听页面刷新 window.addEventListener("beforeunload", () => { // visitedViews数据结构太复杂无法直接JSON.stringify处理，先转换需要的数据 let tabViews = this.visitedViews.map(ite..
关于页面刷新vuex数据消失问题解决方案
08-30
本篇文章主要介绍了关于页面刷新vuex数据消失问题解决方案 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用vuex解决刷新页面state数据消失的问题记录
10-17
主要介绍了使用vuex解决刷新页面state数据消失的问题记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vuex页面刷新后数据丢失的方法
12-11
（3）要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。 2. HTML5提供的2种客户端存储数据...
解决vuex数据页面刷新后初始化操作
11-20
在vue项目的开发中经常会用到vuex来进行数据的存储，然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题！下面是我用过的解决方法 1、利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex...
页面刷新vuex数据消失问题解决方案
qq_44743216的博客
05-09 2189
1、问题： 在进行后台管理项目的开发中，使用js-cookie来生成用户标识，并存在vuex中。 但是发现一刷新页面，页面会重新跳转到登录页面。 2、 原因 这是因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会消失。 3、解决：利用第三方库 （1）安装： npm install vuex-persistedstate （2）在store/index.js中使用 import Vue from 'vue' import Vuex from 'vuex'
vue单页面应用刷新网页后vuex的state数据丢失的解决方案
liuliuliu_666的博客
06-27 1095
vue单页面应用刷新网页后vuex的state数据丢失的解决方案产生原因解决思路第一种思路第二种思路第三种思路解决过程首先得选择合适的客户端存储用sessionStorage来保存state里的数据 产生原因 做的项目是但页面应用，在刷新页面中发现，之前存储在store中的数据随着刷新，也给刷没了，哭唧唧，为什么会没了？这是为什么呢？因为store里的数据是保存在运行内存中的，当页面刷新时，页面会...
vue刷新网页后vuex数据丢失
m0_37714008的博客
06-10 352
vue刷新网页后vuex的state数据丢失 1. 产生原因 因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。 2. 解决思路 state里的数据全部是通过请求来触发action或mutation来改变 将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中 第一种方案基本不可行，除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。
解决Vue刷新后页面数据丢失的问题（sessionStorage和localStorage的用法）
Vivien_CC的博客
10-14 6308
其二，使用sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）state - 数据【存项目共享状态，是响应式的，store的数据改变，所有依赖此状态的组件会更新】，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。【页面关闭就没有了】
vue数据刷新丢失如何解决？
zybijiso666的博客
08-04 894
因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。使用vuex-persistedstate指定需要持久化的state。直接在vuex修改数据方法中将数据存储到浏览器本地存储中。在页面加载时再从本地存储中取出并赋给vuex。
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 1909
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
vuex页面刷新数据丢失怎么解决
07-27
在 Vue.js 中使用 Vuex 管理状态时，页面刷新可能会导致数据丢失的问题。这是由于 Vuex 的状态是保存在内存中的，而页面刷新会导致整个应用重新加载，状态也会重新初始化。 为了解决这个问题，你可以考虑以下几种方法： 1. 使用持久化插件：你可以使用一些 Vuex 的持久化插件，如 vuex-persistedstate 或 vuex-persist 来将状态持久化到本地存储中（如 localStorage 或 sessionStorage）。这样，在页面刷新后，你可以从本地存储中恢复状态数据。 2. 利用路由参数：如果你的数据是根据路由参数来获取的，你可以在路由配置中将这些参数传递给组件，并在组件内部根据参数重新获取数据。 3. 利用后端接口：如果你的数据需要从后端获取，你可以在组件的 created 生命周期钩子中发起请求，以重新获取数据并更新 Vuex 中的状态。 4. 使用浏览器的 sessionStorage 或 localStorage：如果你的数据量较小，也可以考虑将数据存储在浏览器的 sessionStorage 或 localStorage 中。在页面刷新时，从中读取数据并更新 Vuex 状态。 需要注意的是，使用持久化插件或本地存储可能会带来一些性能和安全性方面的考虑，需要根据具体情况进行权衡和选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值