<template>
    <div id="app">
        <router-view v-if="isRouterAlive" />
    </div>
</template>
<script>
import { setStorage, getStorage } from '@/tool/storage';
import { SESSION } from '@/constant';
import { pageStyleMixin } from '@/mixins';
export default {
    provide() {
    // 注册一个方法
        return {
            reload: this.reload
        };
    },
    mixins: [pageStyleMixin],
    data() {
        return {
            isRouterAlive: true
        };
    },
    created() {
        this.setSessionStorageVuexData();
    },
    mounted() {
    },
    methods: {
        setSessionStorageVuexData() {
            // 在页面加载时读取sessionStorage里的状态信息
            if (getStorage({ name: 'store', type: SESSION })) {
                this.$store.replaceState(
                    Object.assign(
                        {},
                        this.$store.state,
                        getStorage({ name: 'store' })
                    )
                );
            }

            // 在页面刷新时将vuex里的信息保存到sessionStorage里
            window.addEventListener('beforeunload', () => {
                setStorage({
                    name: 'store',
                    content: this.$store.state,
                    type: SESSION
                });
            });
        },
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(() => {
                this.isRouterAlive = true;
            });
        }

    }
};
</script>

<style lang="less">
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #303133;
    font-size: 14px;
    background-color: #fff;
    height: 100%;
}
</style>
