一、vuex刷新:
通过监听页面刷新或者关闭来将vuex里面的数据保存到sessionStorage里,在页面加载时读取sessionStorage里的状态信息,更新vuex的数据。
created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage里 // window.addEventListener("beforeunload",()=>{ // 修改之前监听beforeunload方法 window.addEventListener("pagehide",()=>{ sessionStorage.setItem("store",JSON.stringify(this.$store.state)) }) }, 将 beforeunload 替换成 pagehide 就能解决这个问题
补充说明#
1、pageshow事件:这个事件在用户浏览网页时触发,pageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, pageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。
2、pagehide事件:该事件会在用户离开网页时触发。离开网页有多种方式。如点击一个链接,刷新页面,提交表单,关闭浏览器等。pagehide 事件有时可以替代 unload事件,但 unload 事件触发后无法缓存页面。
利用vuex插件中store提供的每次进行mutation之后的回调钩子,来获取到state,然后与之前保存的state做对比,取出不一样的state,然后保存到sessionStorage
const myPlugin = store => { // 当 store 初始化后调用 let _state = store.state; for(let key in _state) { let _sessionvalue = getSessionStorage(key);if(_sessionvalue) { _state[key] = _sessionvalue; } } store.replaceState(_state) window.proxyState = {} Object.assign(window.proxyState, _state)//初始化state //注册修改监听事件 store.subscribe((mutation, state) => { let _state = diffFirst(state, window.proxyState) if(_state.name){ setSessionStorage(_state.name,_state.value) } Object.assign(window.proxyState, state) }) }
缺点:不支持模块所以为了兼容模块,w我们在上面方法的基础上再进一步,在监听修改state事件的时候,我们把模块的路径加上m这一点可以从mutation.type拿到,然后保存到sessionStorage里面的时候把路径带上,同时把所有的更改记录保存在一个单独的session里面,在初始化的时候先在那个单独的session里面拿到所有的更改的state记录,然后依据这些state进行初始化。