zoukankan      html  css  js  c++  java
  • 解决vue刷新页面以后丢失store的数据

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中,localStorage是永久储存,重新打开页面时会读取上一次打开的页面数据,sessionStorage是储存到关闭为止,cookie不适合存大量数据。根据我的需求,最合适的是sessionStorage。
    beforeunload在页面刷新时触发,可以监听这个方法,让页面在刷新前存store到sessionStorage中。
    当然,在页面刷新时还要读取sessionStorage中的数据到store中,读取和储存都写在app.vue中。

    export default {
      name: 'app',
      created () {
        // 在页面加载时读取sessionStorage
        if (sessionStorage.getItem('store')) {
          this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
        }
        // 在页面刷新时将store保存到sessionStorage里
        window.addEventListener('beforeunload', () => {
          sessionStorage.setItem('store', JSON.stringify(this.$store.state))
        })
      }
    }
  • 相关阅读:
    vue+element-ui中的表单验证(电话等等)
    什么是 RegExp?
    C中的指针和字符串
    getchar与scanf区别
    回显程序
    Python基础之容器1----字符串和列表
    Python基础之语句2
    Python基础之语句1
    Python基础之数据基本运算
    python初识
  • 原文地址:https://www.cnblogs.com/Jimc/p/11536962.html
Copyright © 2011-2022 走看看