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


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

    原因:

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

    解决思路:

    本质是在页面刷新的之前,把vuex里的state保存到sessionStorage里,然后store从sessionStorage里取

    //App.vue
    
    mounted(){
    	window.addEventListener('unload',this.saveState)
    },
    methods: {
    	saveState(){
    		sessionStorage.setItem('state',JSON.stringify(this.$store.state));
    	}
    }
    
    //store/index.js
    const state = sessionStorage.getItem('state')?JSON.parse(sessionStorage.getItem('state')):{
    	xxx
    }
    

    PS

    当store使用模块化后(modules),上面就需要发生变化了

  • 相关阅读:
    conda使用
    onedrive共享文件的下载
    生物信息软件安装(不定时更新)
    if 的常见问题解析
    C语言常见的误区
    流程控制
    C语言中的运算符
    scanf的具体用法
    代码的规范
    printf中的x%及用法
  • 原文地址:https://www.cnblogs.com/zhenhunfan2/p/13633356.html
Copyright © 2020-2023  润新知