首页 > 其他分享 >Vue解决页面刷新后,用户信息丢失的问题

Vue解决页面刷新后,用户信息丢失的问题

时间:2022-11-10 09:56:16浏览次数:43  
标签:Vue sessionStorage state JSON 丢失 刷新 store 页面

解决方法:

若存储的信息量较小的情况下可以使用如下方法。
在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));
    });

标签:Vue,sessionStorage,state,JSON,丢失,刷新,store,页面
From: https://www.cnblogs.com/nlbz/p/16876095.html

相关文章

  • vue3 递归菜单组件
    有一个需求,就是不知道菜单到底有多少级,需要按照层级一层层地遍历出来递归实现的三个流程:写函数写遍历条件设置终止条件实现逻辑父请求子组件,并且把列表值转给子组......
  • vue源码分析-动态组件
    前面花了两节的内容介绍了组件,从组件的原理讲到组件的应用,包括异步组件和函数式组件的实现和使用场景。众所周知,组件是贯穿整个Vue设计理念的东西,并且也是指导我们开发的......
  • PHP curl获取页面内容,不直接输出到页面,CURLOPT_RETURNTRANSFER参数设置
    使用PHPcurl获取页面内容或提交数据,有时候希望返回的内容作为变量储存,而不是直接输出。这个时候就必需设置curl的CURLOPT_RETURNTRANSFER选项为1或true。1、curl获取页面......
  • 能不能手写Vue响应式?前端面试进阶
    Vue视图更新原理Vue的视图更新原理主要涉及的是响应式相关APIObject.defineProperty的使用,它的作用是为对象的某个属性对外提供get、set方法,从而实现外部对该属性的......
  • vue面试如何准备,这几道面试题助力你拿到理想offer
    谈谈Vue和React组件化的思想1.我们在各个页面开发的时候,会产生很多重复的功能,比如element中的xxxx。像这种纯粹非页面的UI,便成为我们常用的UI组件,最初的前端组件也就仅仅......
  • 每日一题之请描述Vue组件渲染流程
    组件化是Vue,React等这些框架的一个核心思想,通过把页面拆成一个个高内聚、低耦合的组件,可以极大程度提高我们的代码复用度,同时也使得项目更加易于维护。所以,本文就来分......
  • 我的Vue之旅 10 Gin重写后端、实现页面详情页 Mysql + Golang + Gin
    第三期·使用Vue3.1+Axios+Golang+Mysql+Gin实现页面详情页使用Gin框架重写后端GinWebFramework(gin-gonic.com)整体代码量相比传统http写法少了30%......
  • vue--创建日历
       css使用tailwindcss <scriptsrc="https://cdn.tailwindcss.com"></script>    全部代码<template><divclass="m-auto"><h1cl......
  • error Component name “Home“ should always be multi-word vue/multi-word-compone
    新手在操作npmrunserve的时候会出现以下的报错,报错原因是希望组件名写成驼峰式或者链-先形式的,但是官方又明确单个单词组件命名是符合规定的,总结在编译的时候eslint会......
  • 【前端】学习前端vue框架,了解了什么是v-model
    什么是v-model呢?v-model指令可以在表单input、textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本......