vue单页面应用刷新网页后vuex的state数据丢失的解决方案

拼搏现实的明天。 2023-06-09 12:22 61阅读 0赞

[https://blog.csdn.net/guzhao593/article/details/81435342][https_blog.csdn.net_guzhao593_article_details_81435342]

1一般项目：简单的仅仅使用Vuex造成数据丢失会用本地存储，

2大型项目：（大型项目，页面很多，数据量很大，页面很多，分的很多模块，用插件就不需要懂任何东西，直接写model就可以）插件

最近在用vue写pc端项目，用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。

1. 产生原因

其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

2. 解决思路

一种是将state里的数据保存一份到本地存储(localStorage）中

import {getToken, setToken, setUser, getUser, removeToken} from '@/utils/auth'
    import { login, getUserInfo, logout} from '@/api/login'
    const user = {
    state: {
    token: getToken(), // getToken() 作为token初始值，解决刷新页面之后token为null
    user: getUser()
    },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70][]

可以保证刷新页面数据不丢失且易于读取。

3. 解决过程

首先得选择合适的客户端存储

localStorage是永久存储在本地，除非你主动去删除;

sessionStorage是存储到当前页面关闭为止;

cookie则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取。

我选择的是sessionStorage,选择的原因vue是单页面应用，操作都是在一个页面跳转路由，另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。  
然后是怎么用sessionStorage来保存state里的数据。

第一种方案

由于state里的数据是响应式，所以sessionStorage存储也要跟随变化。又由于vuex规定所有state里数据必须通过mutation方法来修改，所以第一种方案就是mutation修改state的同时修改sessionStorage对应存储的属性

第二种方案

第一种方案确实可以解决问题，但这种方法很明显让人觉得怪异，都这样了，那不如直接用sessionStorage来做状态管理。

那怎么才能不用每次修改state时同时也要修改sessionStorage呢？这时我们可以换一个思路，因为我们是只有在刷新页面时才会丢失state里的数据，那有没有办法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面?

当然有，beforeunload这个事件在页面刷新时先触发的。那这个事件应该在哪里触发呢？我们总不能每个页面都监听这个事件，所以我选择放在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"))))
        } 
    
        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        })
      }
    }

[vue单页应用如何在页面刷新时保留状态数据][vue]

[解决vuex在页面刷新后数据被清除的问题][vuex]

[https_blog.csdn.net_guzhao593_article_details_81435342]: https://blog.csdn.net/guzhao593/article/details/81435342
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70]: /images/20230531/311dba1f5b2943f7bf8454ff02bdcffb.png
[vue]: https://blog.csdn.net/aliven1/article/details/80743470
[vuex]: https://blog.csdn.net/l354002675/article/details/79275731