先贴一段源码。
/**
* @Description: 防止浏览器刷新时，丢失 Vuex 的数据。
* @date 2019/3/26 9:40
* @param storeObj: Vuex 对象。
*/
export default function (storeObj) {
// 1.判断当前是否存在储存的 state 信息
// 2.如果存在state 的内容则恢复数据。
// 3.取出数据后，则移除储存，防止信息泄露。
let store = sessionStorage.getItem('vuex-state')
if (store) {
storeObj.replaceState(JSON.parse(store))
sessionStorage.removeItem('vuex-state')
}
// 监听浏览器刷新事件，保存state 数据
window.onbeforeunload = () => {
sessionStorage.setItem('vuex-state', JSON.stringify(storeObj.state))
}
}
//--- main.js ---
// 保存 vuex记录
SaveVuex(store)
大致功能就是监听浏览器刷新事件， 然后缓存数据到sessionStorage 里， 因为刷新完成，vue 又会重载，就会重新执行该函数，函数体里判断是否存在缓存数据即可，为了数据安全，重载到 vuex 中，移除缓存对象。