精华内容
下载资源
问答
  • sessionStorage结合vuex,保证页面刷新store里的数据仍然存在 // 在刷新前将vuex里的数据保存在sessionStorage里 window.addEventListener('beforeunload', () => { sessionStorage.setItem('store', JSON....

    sessionStorage结合vuex,保证页面刷新store里的数据仍然存在

    // 在刷新前将vuex里的数据保存在sessionStorage里
    window.addEventListener('beforeunload', () => {
        sessionStorage.setItem('store', JSON.stringify(this.$store.state));
    })
    
    // 页面加载时读取sessionStorage里的状态
    if (sessionStorage.getItem('store')) {
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
    }
    
    展开全文
  • 这时我们可以换一个思路,因为我们是只有在刷新页面时才会丢失state里的数据,那有没有办法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面? 当然有,beforeunload这个事件在页面刷新时先...

    sessionStorage是存储到当前页面关闭为止;

    那怎么才能不用每次修改state时同时也要修改sessionStorage呢?这时我们可以换一个思路,因为我们是只有在刷新页面时才会丢失state里的数据,那有没有办法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面?

    当然有,beforeunload这个事件在页面刷新时先触发的。那这个事件应该在哪里触发呢?我们总不能每个页面都监听这个事件,所以我选择放在app.vue这个入口组件中,这样就可以保证每次刷新页面都可以触发。

      //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem("store") ) {
            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))
        })
    
    展开全文
  • vuex页面刷新数据丢失的解决办法 在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue...

    vuex页面刷新数据丢失的解决办法

    在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。

    原因:

    因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化

    解决思路:

    将state的数据保存在localstorage、sessionstorage或cookie中(三者的区别),这样即可保证页面刷新数据不丢失且易于读取。

    1. localStorage: localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。
    2. sessionStorage:sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。
    3. cookie:cookie生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制(各浏览器不同),一般不能超过20个。缺点是不能储存大数据且不易读取。

    由于vue是单页面应用,操作都是在一个页面跳转路由,因此sessionStorage较为合适,原因如下:

    1. sessionStorage可以保证打开页面时sessionStorage的数据为空;
    2. 每次打开页面localStorage存储着上一次打开页面的数据,因此需要清空之前的数据。

    vuex中state数据的修改必须通过mutation方法进行修改,因此mutation修改state的同时需要修改sessionstorage,问题倒是可以解决但是感觉很麻烦,state中有很多数据,很多mutation修改state就要很多次sessionstorage进行修改,既然如此直接用sessionstorage解决不就行了,为何还要用vuex多此一举呢?
    vuex的数据在每次页面刷新时丢失,是否可以在页面刷新前再将数据存储到sessionstorage中呢,是可以的,beforeunload事件可以在页面刷新前触发,但是在每个页面中监听beforeunload事件感觉也不太合适,那么最好的监听该事件的地方就在app.vue中。

    1. 在app.vue的created方法中读取sessionstorage中的数据存储在store中,此时用vuex.store的replaceState方法,替换store的根状态
    2. 在beforeunload方法中将store.state存储到sessionstorage中。

    代码如下:

    export default {
    	name: 'App',
    	created () {
    		//在页面加载时读取sessionStorage里的状态信息
    		if (sessionStorage.getItem("store") ) {
    		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))
    	})
    }
    
    
    展开全文
  • vue:解决vuex页面刷新数据丢失问题 一、问题描述 1、一般在登录成功的时候需要把用户信息,菜单信息放置vuex中,作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的...

    vue: 解决vuex页面刷新数据丢失问题


    一、问题描述
    1、一般在登录成功的时候需要把用户信息,菜单信息放置 vuex 中,作为全局的共享数据。但是在页面刷新的时候 vuex 里的数据会重新初始化,导致数据丢失。因为 vuex 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里面的数据就会被清空。
    2、我在一个组件(例如登录组件页面)中登录了后,其它页面要怎么获取和响应这个变化,使用通过计算属性实现响应数据的变化,mapGetters 获取 vuex
     

    computed: {
        ...mapGetters(['blogUser'])
      },
    但是刷新页面后数据丢失了!!


    二、解决思路:
    方法一:将 vuex 中的数据直接保存到浏览器缓存中(sessionStorage、localStorage、cookie)
    方法二:在页面刷新的时候再次请求远程数据,使之动态更新 vuex 数据
    方法三:在父页面向后台请求远程数据,并且在页面刷新前将 vuex 的数据先保存至sessionStorage(以防请求数据量过大页面加载时拿不到返回的数据)


    因为我存取的数据比较少所以通过办法一解决:
    在App.vue 中添加以下代码

      //===下面是解决刷新页面丢失vuex数据
      created() {
        //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem('store')) {
          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));
        });
      }
    

     

    展开全文
  • 如何解决vuex页面刷新数据丢失问题?
  • 结合sessionStorage解决vuex页面刷新数据丢失的问题
  • 页面刷新数据丢失解决方案 在页面刷新时将 vuex 里的信息保存到 sessionStorage 里,可以通过 addEventListener 监听 beforeunload 事件把 vuex 保存到 sessionStorage 里,当页面加载时获取 sessionStorage 里的...
  • 原理:在页面刷新时,将vuex里的数据保存在localStorage里;在页面加载时读取localStorage里的状态信息 created () { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem(“data”) ) { //...
  • 在vue中使用vuex做状态管理,当刷新页面时,发现state里面的数据丢失,这是因为当页面刷新时,store里面的数据就会重新赋值初始化。 解决:将state里面的数据保存在本地存储中,这样在刷新页面时就可以直接从本地...
  • 但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。 2、解决思路: 办法一:将vuex中的...
  • 但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。 二、解决思路: 将用户信息更新至...
  • 解决vuex页面刷新数据丢失问题(简单有效)

    万次阅读 多人点赞 2020-08-10 11:32:04
    但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被清空。 我在一个组件(例如登录组件页面)中登录...
  • 页面刷新vuex数据消失 **一、问题描述: ** 我们往往在用vue写项目时,通常会遇到使用vuex请求数据渲染页面后,当再次刷新页面时,渲染页面的数据会消失不见,造成数据部分一片空白这种现象。例如下图。其实这种...
  • 在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里...解决思路:将state的数据保存在localstorage、sessionstorage或cookie中(三者的区别),这样即可保证页面刷新数据丢失且易于...
  • import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [ createPersistedState() ] }) import { Store } from 'vuex' import createPersistedState from ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,134
精华内容 853
关键字:

vuex页面刷新数据丢失

vue 订阅