vue:vue页面刷新vuex数据消失问题

vuex中数据刷新页面消失问题:
a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,
可以得解决方法:a页面用的数据a页面的生命周期函数里请求,b页面用的数据b页面的生命周期函数里请求

你需要知道JavaScript代码是运行在内存中的,代码运行时的所有变量,函数,也都是保存在内存中的。
刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想储存就必须储存在外部,例如:Local Storage, Session Storage, IndexDB等。
这些是浏览器提供的API,让你可以将数据储存在硬盘上,做持久化储存。具体选择哪一个就根据你实际的需求来决定。
const ls = window.localStorage
// https://github.com/tsironis/lockr
export default {
getItem(key) {
try {
return JSON.parse(ls.getItem(key))
} catch (err) {
return null
}
},
setItem(key, val) {
ls.setItem(key, JSON.stringify(val))
},
clear() {
ls.clear()
},
keys() {
return ls.keys()
},
removeItem(key) {
ls.removeItem(key)
}
}

原文地址:https://www.cnblogs.com/llqwm/p/9152072.html

时间: 2024-11-08 19:15:43

vue:vue页面刷新vuex数据消失问题的相关文章

页面刷新vuex数据消失问题解决方案 之 vuex中间件

之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案. 今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异.聊着聊着,同事咋不用  store.subscribe , 当时还有点觉得不可能,仔细再去看vuex官方文档. 这个还真的是可行,但当然也是存在不方便的地方的. 此方案现在已经应用我基于vue开发的音乐web app VBOX 上,欢迎大家给star. 基本方案和步骤如下 1. 简单的按照键复制对象 2. localStorage存储的封装

页面刷新vuex数据消失问题解决方案

VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这是头疼的问题. 网上搜,大家的方案都是把数据转移到 localStorage或者其他持久化存储(例如indexDB). 这倒是可以,我在设计之初因为匆忙,没有考虑周全,这下好,然不成每个 mutation都去存一下. 这个弄的我很不开心,周六在公司,本来就困的要死,又想不到合理的解决方案,昏昏沉沉睡

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度 我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态

解决vue单页面刷新后vuex中数据恢复初始值的问题

思路是页面关闭前将state的数据存储到浏览器缓存里,页面加载时再取出来存到state中 //App.vue created () { if (this.$getLocal("store")) { this.$store.replaceState( Object.assign({}, this.$store.state, this.$getLocal("store", "parse")) ); } window.addEventListener(

Vue 路由跳转传递参数,子组件页面刷新后数据不丢失

原文地址:https://www.cnblogs.com/yscec/p/12408492.html

nignx部署Vue单页面刷新路由404问题解决

在linux下搭建nginx测试网页的时候,正常打开可以访问,当刷新后页面出现404 not found的问题 说明: vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({

Asp.net MVC Vue Axios无刷新请求数据和响应数据

Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1.Models { public class Region { public int Id { get; set; } public string City { get; set; } } } Controller using System; us

vue.js页面刷新出现闪烁问题的解决

因为浏览器是html从上到下执行,先执行Dom元素,然后执行javaScript元素,v-show.v-if实在javaScript中控制,当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话,会显示的特别明显. 以上两个问题都可以使用以下的方案来解决. 在css中定义 [v-cloak] {   display:none; } 在v-if中加上v-cloak即可解决. 示例: [v-cloak] { display: none;  }  <div v-cloak> {{ m

vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性

最近在用vue写h5项目,当使用window.location重定向页面或者刷新当前页面时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 后来在网上查找大神的解决方案如下: export default { name: 'App', created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.as