Vue项目，通过状态控制整个页面刷新

如题，页面刷新

很多时候，页面数据可能会频繁整体刷新，基本原理都是通过定时器来刷新，至于具体方法，每个人都有不同的方法。

下面是我比较习惯用的方式:

定义一个变量，定时控制这个变量的变化，在需要刷新的地方监控这个变量，一旦变化立即重新加载数据。不多说，还是直接上代码吧。

定义变量，

我这里喜欢用Vue.observable，简版的vuex ，我是非常喜欢这个东西。

export let state = Vue.observable({
    refreshRequest:0
});

const mutation = {
    setRefreshRequest(value) {
        state.refreshRequest = value;
    },
}

export const getter = {

};

export const action = {
    // 刷新
    updateRefreshRequest:mutation.setRefreshRequest,
}

在页面引入，定时刷新，控制状态变化

<template>
    <div></div>
</template>

<script>
    import { state,action } from './store';

    export default {
        components: {
        
        },
        data() {
            return {
                
            }
        },
        computed: {
            // 刷新
            refreshRequest:()=> state.refreshRequest,
        },
        watch: {},
        mounted() {
            /**开启数据刷新 */
            this.autoRefreshFn();
        },
        beforeDestroy() {
            this.autoRefresh && clearInterval(this.autoRefresh );
            this.autoRefresh = null;
            action.resetState();
        },
        methods: {
            /**状态控制全局request刷新 */
            autoRefreshFn(){
                this.autoRefresh && clearInterval(this.autoRefresh );
                this.autoRefresh = null;
                // 具体多久刷新一次，看你自己需求，我这里示例5分钟刷新一次
                this.autoRefresh = setInterval( ()=>{
                    action.updateRefreshRequest( this.refreshRequest?0:1 );
                }, 5*1000*60); 
            },
        }
    }
</script>

<style lang="less" scoped></style>

在整个页面所有子组件中引入，监控状态变化，一旦变化立即重载数据

<template>
    <panel :config="panelConfig" class="right-panel-wrap">
        
    </panel>
</template>

<script>
    import { state, action } from '../../store';
    import Api from "./api";

    export default {
        components: {
        
        },
        data() {
            return {
            
            }
        },
        computed: {
            // 刷新
            refreshRequest:()=> state.refreshRequest
        },
        watch: {
            /**数据刷新机制 */
            refreshRequest: {
                async handler(e) {
                    //重载数据函数
                    this.loadData();
                },
                immediate: false
            }
        },
        mounted() {
            //加载数据
            this.loadData();
        },
        methods: {
            async loadData(){
            
            }
        }
    }
</script>

<style lang="less" scoped>
    @deep: ~'>>>';
</style>

是不是非常简单实用，哪里需要重载数据，哪里就监控状态变化。不需要导出开启定时器，而且控制起来方便。

在送大家一个小组件，不仅能显示刷新时间，而且还能手动点击刷新。

配合这个状态使用非常舒服，在状态变化刷新数据的时候，这里会监控，显示刷新时间，同时也能手动点击来刷新，鼠标移入也会显示自动刷新频次，效果如下：

image.png

直接上组件代码

<template>
    <el-tooltip effect="dark" content="数据每5分钟更新" placement="bottom">
        <div class="data-refresh-time">
            <div class="icon" @click="clickRefresh">
                // 这里是项目需求，我那里是svg小图标，你可以随便用别的代替
                <icon-svg name="refresh-time"></icon-svg>
            </div>
            <div class="name">{{timerStr}}</div>
        </div>
    </el-tooltip>
</template>

<script>
    export default {
        components: {
            
        },
        props: {
            // 页面自动刷新 状态
            isUpdateTime:{
                typr:Boolean,
                default:function() {
                    return false;
                }
            }
        },
        data() {
            return {
                timerStr:(new Date()).format('HH:mm')
            }
        },
        watch: {
            // 状态变化更新刷新时间
            isUpdateTime(){
                this.timerStr = (new Date()).format('HH:mm');
            }
        },
        computed: {
            
        },
        created() {
            
        },
        mounted() {
            
        },
        methods: {
            //手动点击刷新
            clickRefresh(){
                // 这里随意就行， 我是喜欢调用事件，在外面改变状态，这里不动。
                this.$emit('clickRefresh');
            }
        }
    }
</script>

<style lang="less" scoped>
    .data-refresh-time{
        position: absolute;
        z-index: 1004;
        top:15px;
        right:15px;
        width:80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        user-select: none;
        .icon{
            width: 20px;
            height: 14px;
            cursor: pointer;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-items: center;
            .icon-svg{
                font-size: 30px;
                color: @color-primary;
            }
        }
        .name{
            line-height: 100%;
            font-size: 14px;
            font-weight: 400;
            color: @text-color-primary;
            margin-left: 8px;
            text-shadow: 
                0 0 4px rgba(255,255,255,0.4), 
                0 0 4px rgba(255,255,255,0.4), 
                0 0 4px rgba(255,255,255,0.4);
        }
    }
</style>

使用组件

<template>
    <div class="container">
        <!-- 刷新 这里传入 状态 和 事件  -->
        <data-refresh :isUpdateTime="refreshRequest" @clickRefresh="clickRefresh"></data-refresh>
    </div>
</template>

<script>
    import DataRefresh from 'components/data-refresh-time';
    import { state, action } from '../../store';

    export default {
        components: {
            DataRefresh
        },
        data() {
            return {
            }
        },
        computed: {
            // 刷新
            refreshRequest:()=> state.refreshRequest,
        },
        watch: {
        },
        mounted(){
            
        },
        methods: {
            // 刷新数据
            clickRefresh(){
                action.updateRefreshRequest( this.refreshRequest?0:1 );
            },
        }
    };
</script>

<style lang="less" scoped>
    @deep: ~'>>>';
</style>

以上结束，当然你可以直接不使用事件，在组件里面直接改变状态如下：

<!-- 引入组件  传参使用 .sync  -->
<data-refresh :isUpdateTime.sync="refreshRequest"></data-refresh>

<script>
...
// 引入state中的refreshRequest
// refreshRequest:()=> state.refreshRequest,
refreshRequest:{
    get:()=> state.refreshRequest,
    set:(value) => action.updateRefreshRequest(value)
},


//点击刷新数据 触发更新状态
clickRefresh(){
    this.$emit( 'update:isUpdateTime',!this.isUpdateTime )
    // this.$emit('clickRefresh');
}
...
</script>

以上，结束！