页面刷新vuex的state数据丢失这么办~

迷南。 2023-01-03 12:58 129阅读 0赞

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

首先`感谢各位博主`的分享，参考文章：

`https://blog.csdn.net/guzhao593/article/details/81435342`

`https://blog.csdn.net/gitchatxiaomi/article/details/108914088`

### 1. 刷新页面，vuex的state数据丢失的原因？ ###

js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。

进行刷新页面的操作，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，

所以这些数据要想存储就必须存储在外部 ==>

*  `store里的数据`是保存在`运行内存`中的
 *  当`页面刷新`时，页面会`重新加载vue实例`，store里面的数据就会被重新赋值

### 2. 解决方案： ###

在项目中，登录后，通过登录接口会获取到很多用户信息。

首先将用户信息保存在vuex的`store`和本地存储`sessionStorage`中。

这里需要注意的是vuex的state中的数据是`响应式`的，当你改变vuex中的状态，组件会检测到改变

而sessionStorage就不会了，页面要`重新刷新`才可以看到改变。

所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。

#### 方案一：安装vuex-persistedstate ####

npm install --save vuex-persistedstate

`修改store`

import createPersistedState from 'vuex-persistedstate'
     
    const store = new Vuex.Store({ 
      state: { 
        user: { }, //用户
      },
      mutations: { 
        update_user(state, newuser) { 
          state.user = newuser
        },
      },
        //把所有数据缓存到本地
      plugins: [createPersistedState()],
    })
     
    export default store;

#### 方案二：本地存储 ####

容易想到的方法：将state里的数据保存一份到本地存储(`localStorage`、`sessionStorage`、`cookie`）中

一般选择`sessionStorage`,原因如下：

1.  vue是单页面应用，操作都是在一个页面跳转路由，
2.  `sessionStorage`可以保证打开页面时`sessionStorage`的数据为空，
    
    而如果是`localStorage`则会读取上一次打开页面的数据

`方案需求`：点击页面刷新时先将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))
        })
      }
    }