zoukankan      html  css  js  c++  java
  • 解决vuex刷新页面数据丢失

    1、前言

    vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页面中,相当于我们定义的全局变量,刷新之后,里面的数据就会恢复到初始化的状态。比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加?

    2、使用场景


    vuex存取值一般都是放在computed计算属性中,但是一刷新页面的数据就没了

    3、思路

    监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStorage/localStorage中。页面打开之后,判断sessionStorage/localStorage中是否存在state对象,如果存在,则说明页面是被刷新过的,将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在,说明是第一次打开,则取vuex中定义的state初始值。

    4、代码实现

        //全局监听,页面刷新的时候将store里state的值存到sessionStorage中,然后从sessionStorage中获取,再赋值给store。然后再把session里面存的删除即可,相当于中间件的作用。
     //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem("store")) {
          this.$store.replaceState(
            Object.assign(
              {},
              this.$store.state,
              JSON.parse(sessionStorage.getItem("store"))
            )
    	  );
    	  sessionStorage.removeItem("store")
        }
    
        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload", () => {
          sessionStorage.setItem("store", JSON.stringify(this.$store.state));
        });
    
  • 相关阅读:
    vue.js 源代码学习笔记 ----- 工具方法 option
    日期字符串格式转换
    MySQL数据库的知识总结
    Mybatis 中#{}和${}的区别
    MySQL数据库 常用命令
    MySQL -进阶
    JQuery杂项方法
    ASP.NET MVC 扩展自定义视图引擎支持多模板&动态换肤skins机制
    C#各种导入Excel文件的数据的方法总结
    C#基础随手笔记之基础操作优化
  • 原文地址:https://www.cnblogs.com/lml-lml/p/10084390.html
Copyright © 2011-2022 走看看