解决vue页面刷新vuex中state数据丢失的问题解决vue页面刷新vuex中state数据

页面刷新后，原有的 vuex 中的 state 会发生改变，如果在页面刷新之前，可以将 state 信息保存，页面重新加载时，再将该值赋给 state，那么该问题即可解决。
1、localstorage 可以使用 localstorage 来保存信息。

【在某组件中添加如下钩子函数。比如 App.vue中】created() {//在页面加载时读取localStorage里的状态信息if (localStorage.getItem("store") ) {this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))}//在页面刷新时将vuex里的信息保存到localStorage里window.addEventListener("beforeunload",()=>{localStorage.setItem("store",JSON.stringify(this.$store.state))})}注：this.$store.replaceState()用于替换 store 的信息（状态合并）。Object.assign(target, ...source)将source的值赋给 target，若有重复的数据，则覆盖。其中...表示可以多个source。JSON.stringify()用于将对象转为 JSONJSON.parse()用于将 JSON 转为对象

注意：
若有两个组件，当调用 localstorage 的值，可能会出现问题。
如下图，Main.vue 中每次刷新页面会触发 localstorage 操作。
开始 localstorage 中没值，某用户通过 Login.vue 组件进入 Main.vue 组件并刷新页面后，localStorage 会记录当前用户相关的 state 信息。
直接在浏览器中切换路径到Login.vue。当另外一个用户通过 Login.vue 并进入 Main.vue 时，此时获取的就是上一个用户的信息，这样肯定会出问题（我遇到的一个坑，大致意思就是这样）。

文章图片

一个暴力的解决思路，在Login.vue中直接将上一个用户缓存的信息给删除。此时 localStorage 没有了上个用户的信息。【Login.vue】created() {// 进入画面前，移除主页面保存的 state 信息localStorage.removeItem("store")}然后只在Main组件刷新时使用 localStorage 记录信息。【Main.vue】created() {//在页面加载时读取localStorage里的状态信息if (localStorage.getItem("store") ) {this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))}//在页面刷新时将vuex里的信息保存到localStorage里window.addEventListener("beforeunload",()=>{localStorage.setItem("store",JSON.stringify(this.$store.state))})}

2、sessionStorage 也可以使用 sessionStorage 来保存信息。

【在某组件中添加如下钩子函数。比如 App.vue中】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))})}

3、localstorage 与 sessionStorage 的区别