vuex在刷新页面时保持数据不变（vuex状态持久化）

vuex在刷新页面时保持数据不变（vuex状态持久化）

问题：

在 vue 项目中使用 vuex 来进行数据状态的管理，当刷新页面时，vuex 中 state 的数据会出现初始化问题（数据丢失）

解决方法：

1.使用 webStorage 缓存

当浏览器窗口关闭或者刷新时，会触发beforeunload事件，此时，可以使用 webStorage 缓存来实现 vuex 在刷新页面时保持数据不变

created(){
    
    
   //在页面加载时读取sessionStorage里的状态信息
   this.$store.state.userInfo = window.sessionStorage.getItem("userInfo") 
   //在页面刷新时将vuex里的信息保存到sessionStorage里
   window.addEventListener("beforeunload", () => {
    
    
       window.sessionStorage.setItem("userInfo", this.$store.state.userInfo)
   })
}

2.使用vuex状态持久化插件vuex-persistedstate

vuex-persistedstate插件使用浏览器的本地存储（ local storage ）对 vuex 的状态（ state ）进行持久化

安装 vuex-persistedstate：

npm install vuex-persistedstate --save-dev

在store文件夹的 index.js 中使用

//引入vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
......
export default new Vuex.Store({
    
    
  ......
  //配置vuex-persistedstate
  plugins: [createPersistedState(
  	//配置将vuex的状态储存到sessionStorage中（默认储存到localStorage中）
    {
    
     storage: window.sessionStorage }
  )]
})