zoukankan      html  css  js  c++  java
  • 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),上面就需要发生变化了

  • 相关阅读:
    div 背景透明,字体不透明
    弹性盒子(1)
    小练习(4)
    小练习(3)
    图标文字上拉效果
    小练习(2)
    小练习
    css的使用(1)
    复合的使用
    表单元素的使用 form input
  • 原文地址:https://www.cnblogs.com/zhenhunfan2/p/13633356.html
Copyright © 2011-2022 走看看