本地state丢失怎么解决？
. 产生原因
store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。
2. 解决办法
方法一
将State里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中
让页面在刷新前存store到localStorage中。当然，在页面刷新时还要读localStorage中的数据到store中，读取和储存都写在app.vue中。
export default {
name: "App",
created() {
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload", () => {
localStorage.setItem("messageStore", JSON.stringify(this.$store.state));
});
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("messageStore") &&
this.$store.replaceState(
Object.assign(
this.$store.state,
JSON.parse(localStorage.getItem("messageStore"))
)
);
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
方法二
1、安装
npm install --save vuex-persistedstate
1
1
2、在store.js中引入