<template>
	<router-view v-if="isRouterAlive" />
</template>

<style lang="scss">
body {
	overflow: hidden;
}
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
}

#nav {
	padding: 30px;

	a {
		font-weight: bold;
		color: #2c3e50;

		&.router-link-exact-active {
			color: #42b983;
		}
	}
}
</style>
<script>
export default {
	name: 'App',
	provide() {
		return {
			reload: this.reload,
		};
	},
	data() {
		return {
			isRouterAlive: true,
		};
	},
	methods: {
		reload() {
			this.isRouterAlive = false;
			this.$nextTick(function () {
				this.isRouterAlive = true;
			});
		},
	},
	created() {
		// 解决页面刷新后vuex数据不失效问题
		// sessionStorage中store存在重写state
		if (localStorage.getItem('store')) {
			this.$store.replaceState(
				Object.assign(
					{},
					this.$store.state,
					JSON.parse(localStorage.getItem('store'))
				)
			);
			// localStorage.removeItem('store')
		}
		// 在页面刷新时将vuex里的信息保存到sessionStorage里
		window.addEventListener('beforeunload', () => {
			localStorage.setItem('store', JSON.stringify(this.$store.state));
		});
	},
	mounted: function () {},
};
</script>
