FE_bankTeaching/src/App.vue

<template>
    <div id="app" >
        <select-business class="selectBusiness" :showIt.sync="showIt" />
        <router-view></router-view>
        <vCase :showIt.sync="showIt"></vCase>
        
        
    </div>
</template>
<script>
    import vCase from '@/components/case'
    import Setting from '@/setting';
    import util from '@/libs/util';
    import selectBusiness from '@/components/selectBusiness'
    import { mapState, mapMutations } from 'vuex'
    export default {
        name: 'App',
        components: {
                vCase,
                selectBusiness
            },
        created () {
            //在页面加载时读取localStorage里的状态信息
            if (util.local.get(Setting.storeKey) ) {
                this.$store.replaceState(Object.assign({}, this.$store.state,util.local.get(Setting.storeKey)))
                this.$store.system.replaceState(Object.assign({}, sessionStorage.getItem('systemData')))
            } 

            //在页面刷新时将vuex里的信息保存到localStorage里
            window.addEventListener("beforeunload",()=>{    
                util.local.get(Setting.tokenKey) && util.local.set(Setting.storeKey,this.$store.state)
                sessionStorage.setItem('systemData', this.$store.system.state)
            })                                                                                      
        },
        data() {
            return {
                showIt: true
            }
            
        },
        methods: {
            ...mapMutations({
                setShowBusiness: 'system/setShowBusiness'
            }),
        },
        watch: {
            showIt(newVal) {
                if(!newVal && !this.businessKey) {
                    this.setShowBusiness(true)
                }
            }
        },
        computed: {
            ...mapState({
                businessKey: state => state.system.businessKey
            })
        },
    }
</script>

<style scoped>
#app {
    min-width: 1300px;
}
.selectBusiness {
    width: 100%;
    height: 100%;
}
</style>