解决vue页面刷新后原先获取的vuex中state消失的问题

最新推荐文章于 2022-10-10 17:28:10 发布
最新推荐文章于 2022-10-10 17:28:10 发布
阅读量353 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34595425/article/details/119535601
版权

在 app.vue中的created函数中写如下代码：localstorage和sessionStorage都可以

//在页面加载时读取sessionStorage里的状态信息

if (sessionStorage.getItem(“store”) ) {

this. s t o r e . r e p l a c e S t a t e ( O b j e c t . a s s i g n ( , t h i s . store.replaceState(Object.assign({}, this. store.replaceState(Object.assign(,this.store.state,JSON.parse(sessionStorage.getItem(“store”))))

}

//在页面刷新时将vuex里的信息保存到sessionStorage里

window.addEventListener(“beforeunload”,()=>{

sessionStorage.setItem(“store”,JSON.stringify(this.$store.state))

})

小爱同学-Allen
关注
【Vue】replaceState+sessionStorage解决页面刷新后原先在Vuex中的state丢失的问题
Milk~每天分享一点点，技术进步一点点
10-24 1316
replaceState+sessionStorage解决页面刷新后原先在Vuex中的state丢失的问题（状态丢失） 文件目录 利用 pagehide 事件在用户刷新页面时将vuex的store存入sessionstorage中，然后在页面加载时，从sessionstorage中获取，replaceState store created() { // 在页面加载时读取sessionStorage里的状态信息 let store = window.sessionStorage.get
Vue Router和Vuex：Vue Router是Vue.js官方的路由管理器，Vuex是Vue.js的状态管理模式。它们都是构建大型单页面应用必不可少的工具
最新发布
哎 你看的博客
06-02 475
介绍Vue Router Vue Router的基本概念 Vue Router的安装和使用 Vue Router的基本配置：路由、嵌套路由、命名路由等 Vue Router的导航：编程式导航、声明式导航 Vue Router的路由守卫：全局守卫、组件内守卫、路由独享守卫 深入Vue Router Vue Router的路由模式：hash模式、history模式 Vue Router的路由传参 Vue Router的过渡效果 Vue Router的滚动行为 Vue Router的按需加载 介绍Vuex
vuex管理状态 刷新页面保持不被清空的解决方案
12-13
mutation文件 import { RECEIVE_PUBLICHTIT } from './mutation-types' //保证刷新页面数据不消失* function storeLocalStore (state) { window.localStorage.setItem("publicTit",JSON.stringify(state)); } export default { [RECEIVE_PUBLICHTIT] (state,{title}){ state.publicTit = title storeLocalStore(state) } } 用到pu
如何解决使用vuex刷新网页内容为空
xy520zzz的博客
05-07 1044
在vue项目中用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。 原因： 因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化 解决思路： 将state的数据保存在localstorage、sessionstorage或cookie中（三者的区别），这样即可保证页面刷新数据不丢失且易于读取。 localStorage: localStorage的生命周期是永久的，关闭页面或浏览器之后local
vuex 刷新数据消失 插件_Vuex中的State
weixin_39865204的博客
12-13 121
state 是Vuex中的基本数据，state 上存放的就是所谓的状态。当没有使用 state 的时候，直接在 data 中进行初始化，有了 state 之后，我们就把 data 上的数据转移到 state 上去了。单一状态树Vuex 使用到的是单一状态树，即用一个对象就包含了全部的状态数据。也就是说如果我们定义了一个 store 的实例，那么这个 store 实例里面只有一个 state。sta...
vue刷新网页后vuex的state数据丢失的问题
hj_001的博客
06-28 358
1、解决方法 将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中。 2、实现方式 beforeunload这个事件在页面刷新时是先触发的，我在app.vue这个入口组件中监听beforeunload，先将state数据保存到sessionStorage，然后再刷新页面这样就可以每次刷新页面都可以触发，将state数据保存到sessionStorage中。 代码如下： export default { name: 'App', create
React16新的生命周期函数getDerivedStateFromProps的使用，你也许并不需要派生状态【译】
热门推荐
乌鸦的专栏
06-27 4万+
新的生命周期函数getDerivedStateFromProps的使用，你也许并不需要派生状态【译】 原文：You Probably Don’t Need Derived State React16.4包含一个关于getDerivedStateFromProps的bugfix，可以让React组件中的一些现有bug以更一致的方式重现。如果这次变动导致了您的应用程序使用了反模式，并且出现...
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
希望每天都能进步一点点
06-25 2836
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
5 Vue＋html css 问题（西安10.9）
harvestUachieve的博客
10-10 1343
数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。
VUE_UI_2.组件跳转、传参、vuex
2018.
02-14 657
组件跳转、传参1 组件间跳转及传参2 示例 1 组件间跳转及传参 (1)标签方式跳转(优先选) <router-link to="组件路径&amp
解决vuex数据页面刷新后初始化操作
11-20
在vue项目的开发中经常会用到vuex来进行数据的存储，然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题！下面是我用过的解决方法 1、利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时，将数据同时存储进我们的本地浏览器缓存中；下面是我在mutation中写的方法； 同步将数据的更改保存，也可以在页面调用vuex的mutation方法时同步更改；但是这种方法只能针对少量的数据需要保持不刷新，在真正的卡发中并不适用 2、利用已有的插件来进行保存新状态 一致的插件中，我目前使用的是vuex-along插件，该插件使
结合sessionStorage解决vuex页面刷新数据丢失的问题
weixin_45866907的博客
08-18 87
结合sessionStorage解决vuex页面刷新数据丢失的问题
getDerivedStateFromProps (从props中获取state)
Fs670267542的博客
11-26 2885
getDerivedStateFromProps生命周期函数,可以把父组件穿过来的props值转换为state,存起来(但是有个小问题,就是在子组件通过setState更新数据的时候不好使,要更新子页面,还是得改变父组件里的props里的data) 我用的是antd的table组件 (table在此处是子组件,父组件是个form表单) 子组件要获取父组件传过来的props,存到state里面,可以通过props拿到 ...
vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
xuan2717的博客
08-03 325
vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
单页面刷新后vuex里数据丢失的解决办法
weixin_49800246的博客
08-01 184
单页面刷新后vuex里数据丢失的解决办法 原因：当页面刷新时，页面内的数据会丢失 解决思路：可以在页面刷新前，将页面内的数据保存localstorage,sessionstorage或cookie中。 三者区别： 1、localStorage: localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。 2、sessionStorage:sessionStorage的生命周期是在仅在当前会话下有
解决浏览器刷新后vuex中state失效的问题
qq_40629286的博客
04-28 1575
问题：在做项目的过程中，发现了一个小问题：在初次进入项目系统时用户头像能够正常显示 但是在对浏览器进行刷新操作后，用户头像会加载失败 分析：为了找出问题原因，在对源码分析后发现导致这一问题出现的根本原因是浏览器刷新后vuex中state失效了，而加载图片的src路径依赖于store,所以解决这一问题的根本在于解决浏览器刷新后state失效问题。 解决思路：废话少说，步骤很简单，只需要在vue项目中的app.vue文件中的created()方法中加入以下代码即可 //在页面加载时读取sessionS
2021-08-11用来解决vuex中state状态发生改变后。页面不刷新的问题。
jiaohuang2442的博客
08-11 1461
用来解决vuex中state里的状态发生改变后。页面不刷新的问题。 解决方案：mapState 语法糖 在组件中引入 import { mapState } from ‘vuex’ 在组件计算属性： 计算属性监听vuex中state里的值。 computed:mapState( { orgType () { return this.$store.state.userID }, orgName () { return this.$store.state.userName }, valueA: 'va
vuex刷新数据消失问题
lotte
10-24 528
存取vuex import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex) const state={ code:{ a:1, b:'sss' } } const mutations={ getDate(state,num){ state.code.a+=num //赋值后直接存起来...
【vue】解决项目刷新，state消失的问题、跨域问题,router-link的to上面也可以是一个对象
Study_Live_Sun的博客
04-10 705
在使用vuex的过程中会发现只要一刷新，state里的数据就会清空，因为vue的数据是保存在内存中，所以需要状态持久化的解决方案，一般大家会推荐使用html5自带的localStorage，也可以使用vuex专用的vuex-persistedstate， 安装： npm i --save vuex-persistedstate 使用：只需要在store主体文件内引入即可： import...
解决Vue页面刷新Vuex数据丢失：使用Proxy与本地存储
本文档探讨了在Vue应用中使用Vuex时遇到的页面刷新数据消失问题的解决方案。Vuex是一个状态管理库，它允许在单页应用（SPA）中集中管理共享状态，但在页面刷新或浏览器关闭后，由于数据没有持久化存储，常规情况下会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值