vuex中存储的数据，刷新页面后导致数据丢失

文章目录

vuex中存储的数据，刷新页面后导致数据丢失一、问题二、原因三、解决四、补充总结

一、问题

使用vuex存储全局数据后，刷新浏览器页面导致数据丢失

二、原因

刷新页面时，vue实例重新加载，因此导致store也随之被重置

store是用来存储组件状态的，而不是用来做本地数据存储的

对于不希望页面刷新之后被重置的数据，推荐使用本地存储来进行存储

三、解决

示例代码请在 App.vue 中

<template><div id="app"><router-view /></div></template><script>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// 在页面刷新时先触发beforeunload事件window.addEventListener('beforeunload', () => {sessionStorage.setItem('store', JSON.stringify(this.$store.state))})},}</script>

四、补充

cookie： 不适合存储较大的数据 （一段不超过4KB的小型文本数据）

localStorage： 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除（永久存储）

sessionStorage： 临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据（推荐）

总结

vuex中存储的数据，刷新页面后导致数据丢失的处理方式