vuex页面刷新保存数据到sessionstorage中，以及需要注意的问题

最新推荐文章于 2024-03-22 11:39:12 发布

走_开

最新推荐文章于 2024-03-22 11:39:12 发布

阅读量6.9k

点赞数 2

分类专栏： vue2 web前端 vuex 文章标签： vuex sessionstorage vuex页面刷新

本文链接：https://blog.csdn.net/believet93/article/details/90199823

版权

本文介绍了如何利用Vuex将数据保存在SessionStorage中以应对页面刷新，特别是在iOS环境下使用pagehide替代beforeunload事件。同时强调在Vuex的getters、mutations和自定义函数中，若依赖state数据，必须传入state参数，并通过state.变量名的方式来访问数据。

摘要由CSDN通过智能技术生成

1、vuex页面刷新保存数据到sessionstorage中（参考其他博客https://blog.csdn.net/guzhao593/article/details/81435342），在App.vue中添加如下代码，其中ios中废弃了beforeunload事件，使用pagehide代替。

    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))
      })

      //ios废弃了beforeunload，使用pagehide代替
      window.addEventListener("pagehide",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      })
    }

2、注意可能会出现的问题