防止vuex刷新数据丢失

在入口文件对刷新事件进行监听,刷新是触发beforeunload,然后将整个vuex信息放入浏览器本地存储中

mounted () {
    window.addEventListener('beforeunload', () => {
        sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
}

刷新结束后,会触发vue钩子created,判断本地存储是否有store,如果有,则利用vue中的this.$store.replaceState,官网介绍替换 store 的根状态，仅用状态合并或时光旅行调试。可以直接覆盖state,利用Object.assign对状态管理器进行合并或覆盖

created () {
    if (sessionStorage.getItem('store')) {
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
        sessionStorage.removeItem('store')
    }
}

引用:
vuex冷门实例方法replaceState、watch、subscribe、subscribeAction等介绍