1. 产生原因
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、安装
npm install --save vuex-persistedstate
2、在store.js中引入
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
const store = new Vuex.Store({
plugins: [createPersistedState()],
});