Vue页面刷新后store数据丢失

爱被打了一巴掌 2023-07-07 05:54 37阅读 0赞

原因：  
store本意不是用来存储数据的，而是存储组件状态。  
但是因为存取速度比sessionStorage快。所以还是有人用来存数据。比如我。  
那么这个重置的问题要咋搞呢？  
解决办法：  
使用window的beforeunload事件将store中的数据存储到sessionStorage中。  
然后再声明周期函数created()中将session的数据替换掉vue中的store数据  
不过这里有一个要注意异步的问题。因为js是异步执行机制。所以必须要等到session中的数据存储到store中之后才能执行涉及该store数据的代码，不然全部都是undefined。  
可以通过promise对象来进行同步化

具体代码：

// 先建立seesion工具来统一调用
    // util_session.js
    import store from '../vuex/store'
    // 用于sessionStorage替换store函数。
    export function sessionReplaceStore (name) { 
      return new Promise((resolve, reject) => { 
        if (sessionStorage.getItem(name)) { 
          // 替换state状态
          store.replaceState(
            Object.assign(
              { },
              store.state,
              JSON.parse(sessionStorage.getItem(name))
            )
          )
          resolve(true)
        } else { 
          resolve(false)
        }
      })
    }
    
    // vue文件
    // xxxx.vue
    // 无关的内容就不写了
    <script>
    import { sessionReplaceStore} from '../../utils/util_session'
    
    created () { 
        // 页面刷新时恢复store数据
        var that = this
        sessionReplaceStore('store').then(reslove => { 
        // 执行需要获取store数据有关的代码
          console.log(that.$store.state.stock)
        }
        // 发生页面销毁事件前将store数据存储至sessionStoreage中
        window.addEventListener('beforeunload', () => { 
          sessionStorage.setItem('store', JSON.stringify(this.$store.state))
        })
      }
    </script>

这样就可以了。

代码说明：

###### promise()：javascript异步操作的处理结果 ######

参考文档: [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Promise][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Promise]

###### store.replaceState()： 用来替换store中的state数据 ######

参考文档：[https://vuex.vuejs.org/zh/api/\#replaceState][https_vuex.vuejs.org_zh_api_replaceState]

###### Object.assign(): 对象合并函数。将第二，第三参数的对象合并保存至第一参数的对象中。并且返回该对象。 ######

参考文档：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Object/assign][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Object_assign]

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Promise]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
[https_vuex.vuejs.org_zh_api_replaceState]: https://vuex.vuejs.org/zh/api/#replaceState
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Object_assign]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign