Vue项目 解决 vuex 在页面刷新后数据丢失的问题
最近在学Vuejs, 发现刷新页面出现 vuex 中的数据丢失问题: 例如从第一个页面跳转到第二个页面后刷新,这个时候保存在 vuex中的数据丢失从而导致页面空白。针对这个问题总结了如下两种方法。
# 方法一
我们都知道如果在浏览器中保存数据使用 session 或者 cookie,因此我们可以在main.js 或 App.vue 中添加如下代码
if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
sessionStorage.removeItem("store");
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
例如 App.vue 中添加:
<template>
<div id="app">
<Main/>
</div>
</template>
<script>
import Main from "./components/Main";
export default {
name: "app",
components: {
Main
},
created() {
if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
sessionStorage.removeItem("store");
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 方法二
使用 vuex 状态的小插件 vuex-along,安装:
npm install vuex-along --save
1
import 导入:
import vuexAlong from 'vuex-along'
1
将 vuex-along 添加至 store 的 plugins 的数组里:
export default new Vuex.Store({
state:{...},
...
plugins: [vuexAlong]
});
1
2
3
4
5
2
3
4
5
这时插件已经生效了,默认保存所有的 state,可以通过相应API来设置。
相关资料:https://github.com/boenfu/vuex-along#readme (opens new window)
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13