vuex
监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStorage/localStorage中。
页面打开之后,判断sessionStorage/localStorage中是否存在state对象,如果存在,则说明页面是被刷新过的,将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在,说明是第一次打开,则取vuex中定义的state初始值。
//全局监听,页面刷新的时候将store里state的值存到sessionStorage中,然后从sessionStorage中获取,再赋值给store。然后再把session里面存的删除即可,相当于中间件的作用。
//在页面加载时读取sessionStorage里的状态信息
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));
});
安装插件
vuex-persistedstate实现数据持久化,来解决使用vuex存储状态时页面刷新后数据消失的问题
vuex-persistedstate:在页面重新加载之间保持并重新补充Vuex状态
npm install --save vuex-persistedstate
在store中
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {},
//方法属性
mutations: {},
//异步属性
actions: {},
//计算属性
getters: {},
modules: {},
// 页面刷新时防止信息丢失 存储到localStorage
// plugins: [createPersistedState()],
// 存储到sessionStorage
//plugins: [createPersistedState({
// storage: window.sessionStorage
//})],
plugins: [createPersistedState()]
})
export default store