刷新浏览器vuex数据丢失

最新推荐文章于 2024-07-02 17:47:34 发布
最新推荐文章于 2024-07-02 17:47:34 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cofecode/article/details/77644407
版权

项目中组件之间需要共享一些变量。于是乎我把各个页面之间需要共享的一些的值存到了vuex里面。其中一个页面拿到值之后，就把其存到vuex里

另外的页面就用this.$store.state.XXX来调用。

但是有个问题。在刷新浏览器后vuex里面的值就会全部丢失。

目前没有找到更好的办法，只能把需要共享的值往sessionStorage里面存。然后每个组件自身需要用的时候，再去sessionStorage里去取去

这样vuex 存在的意义又是什么？不理解。再去撸vuex 文档去！！

cofecode
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue刷新网页后vuex数据丢失
m0_37714008的博客
06-10 392
vue刷新网页后vuex的state数据丢失 1. 产生原因 因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。 2. 解决思路 state里的数据全部是通过请求来触发action或mutation来改变 将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中 第一种方案基本不可行，除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。
【解决Vuex刷新数据丢失问题】
m0_46627407的博客
07-19 208
解决vuex页面刷新数据丢失问题
vuex页面刷新后数据丢失的方法
12-11
1. 原因 （1）js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。 （2）刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。 （3）要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。 2. HTML5提供的2种客户端存储数据的新方法 localStorage存储数据： （1）存储的数据是永久性的，永不过期； （2）作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据（不论该源
解决vuex在页面刷新后数据丢失的问题
weixin_34357267的博客
05-22 257
一、原因 　　js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。 　　刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。具体选择哪一个就根据你实际需求来选择。 二、解决...
解决 Vuex 页面刷新数据丢失问题
最新发布
My_wife_QBL的博客
07-02 1239
Vuex 是 Vue.js 的官方状态管理库，用于在 Vue 应用中集中管理应用的状态。然而，当用户刷新页面时，Vuex 中的状态会丢失，这可能会导致用户体验不佳。本文将探讨如何解决 Vuex 页面刷新数据丢失的问题，并提供一些实用的解决方案。
vuex页面刷新 数据丢失
jiemaio的博客
12-25 210
sessionStorage是存储到当前页面关闭为止; 那怎么才能不用每次修改state时同时也要修改sessionStorage呢？这时我们可以换一个思路，因为我们是只有在刷新页面时才会丢失state里的数据，那有没有办法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面? 当然有，beforeunload这个事件在页面刷新时先触发的。那这个事件应该在哪里触...
vuex刷新页面数据丢失的问题
zah521999的博客
05-08 1076
1,页面刷新数据丢失的原因？ vuex是将state当做全局变量存储。刷新页面之后自然随着页面的刷新重新初始化state。所以存的数据也会丢失。 2，解决数据丢失，一般都会用localstorage或者cookie去缓存数据。 3，推荐新的插件vuex-along，使用方法： 第一步：npm install vuex-along或者yarn add vuex-along 第二步：引入：import...
vue项目中使用vuex刷新页面出现数据丢失
一望红尘的博客
07-31 708
代码来自这位老哥的文章 原因vuex数据存于内存，刷新就没了 解决思路，刷新前保存，刷新后读取 export default { name: 'App', created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replac...
Vuex页面刷新，数据丢失问题
m0_64705484的博客
04-25 587
之前在看面试题的时候，就看到了这个问题。这次实战项目正好也遇上了这个问题，记录一下。
Vuex页面刷新数据丢失的问题
qq_40992225的博客
10-26 5959
Vuex只是在内存保存状态，刷新之后就会丢失，如果要持久化就要存起来。localStorage就很适合,提交mutation的时候同时存入localStorage,store中把值取出作为state的初始值即可。这里有两个问题，不是所有状态都需要持久化；如果需要保存的状态很多，编写的代码就不够优雅，每个提交的地方都要单独做保存处理。这里就可以利用vuex提供的subscribe方法做一个统一的处理。甚至可以封装一个vuex插件以便复用。
Vuex页面刷新的数据丢失问题
冲出仁川，走出马德里，故事还会再继续
03-02 304
在实际项目中，经常会遇到多个组件需要访问同一个数据的情况，且都需要根据数据的变化作出响应，而这些组件之间可能并不是父子组件这种简单的关系。在这种情况下就需要一个全局的状态管理方案-Vuex。Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
phpstudy页面不存在_页面刷新vuex数据消失
weixin_39992660的博客
11-21 231
1、前言vue构建的项目中，vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，问题来了，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，里面的数据就会恢复到初始化的状态。比如，用户已经登录了，我把登录状态放到state中了，一刷新页面，还要重新登录？购物车里的添加的数据，一刷新要重新添加？2、使...
Vuex 页面刷新后数据丢失问题
言小溪 的博客
04-01 259
因为 Vuex 是状态保存，所以页面刷新，数据会丢失，这个时候需要保存数据到本地 页面刷新时 > state保存到 localStorage 页面进入时 > 获取 localStorage 合并到 state App.vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> ex
解决浏览器刷新vuex数据丢失问题
weixin_30510153的博客
02-27 239
vuex的主要作用是组件之间的通信以及对数据进行中心化管理。 但是由于vuex中的数据是存在运行内存中的，所以当我们刷新页面的时候会导致store中的数据清空。 怎么解决这个问题呢？ 我们可以使用传统的存储方式将store中的数据存起来，比如cookie、localstorage或者sessionstorage，这样刷新页面数据也不会丢失了。 只是为了保留浏览器刷新前的数据，所以我们选用s...
vuex 为什么刷新页面后数据会丢失
qq_41181141的博客
07-22 230
vuex 数据存放在内存中，当你刷新页面后会重新加载页面，内存就会被释放，js垃圾回收原来 localstorage 存在本地存储中
解决Vuex刷新页面数据丢失的问题
热门推荐
qq_51441159的博客
11-26 1万+
vuex持久化或者页面刷新数据丢失
探索vue2框架的世界：vuex持久化，存储的数据刷新页面后导致数据丢失？
Code_King006的博客
04-07 1947
vuex中存储的数据，刷新页面后导致数据丢失的处理方式。
刷新页面vuex数据丢失
10-19
在Vue.js中，Vuex是一个专门...为了解决这个问题，我们可以将Vuex的数据直接保存在浏览器的缓存中（如sessionStorage、localStorage、cookie），这样在页面刷新后，我们可以从浏览器缓存中取出数据，从而避免数据丢失。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值