zoukankan      html  css  js  c++  java
  • 解决vuex刷新页面就恢复初始化的方法之一

    解决vuex刷新页面就恢复初始化的方法之一

    原文链接:http://www.cnblogs.com/dayongmengmengda/p/9971048.html

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

    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赋值直接读取sessionstorage中的内容,这样就将全局变量值完整的保存下来。

    转载于:https://www.cnblogs.com/dayongmengmengda/p/9971048.html

  • 相关阅读:
    vuex状态管理
    vue3.0创建一个项目
    Django + Vue
    Django部署
    django简单使用
    Django模型
    Centos7编译openjdk8源码
    深入了解final
    深入了解java值传递
    java自带的Logger日志系统
  • 原文地址:https://www.cnblogs.com/grj001/p/12223312.html
Copyright © 2011-2022 走看看