在app.vue里面加上
/*vuex数据刷新丢失问题*/
created() {
if (sessionStorage.getItem("store")) {
this.$store.replaceState(Object.assign({
}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
}
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state))
});
},
或者参考一下下面的
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive:true,
}
},
/*vuex数据刷新丢失问题*/
created() {
if (sessionStorage.getItem("store")) {
this.$store.replaceState(Object.assign({
}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
}
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state))
});
},
mounted(){
this.reload()
},
methods:{
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
<style lang="scss">
.app-container {
background-color: #eff3f6;
width: 100%;
// height: calc(100vh - 84px);
// overflow: hidden;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
border-radius: 0;
background: rgba(0,0,0,0.0);
}
body .el-table th.gutter {
display: table-cell !important;
}
</style>