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

如题，页面刷新

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

下面是我比较习惯用的方式: 写了两种，Vue2.0 和 Vue3.0 的。

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

Vue2.0 使用Vue.observable 返回一个对象的响应式代理

定义data.js

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

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

export const getter = {

};

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

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

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

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

Vue3.0 使用reactive 返回一个对象的响应式代理

定义 data.js

import { reactive } from 'vue';

export const state = reactive({
    refreshRequest:0,
    dataInfo:{
        name:'测试'
    }
})

export const getter = {

}

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

export const action = {
    updateRefreshRequest:mutation.setRefreshRequest,
    updateDataInfo:mutation.setDataInfo,
}

使用，定时控制变化

在需要刷新数据的地方引入，刷新数据

以上，结束。

在送大家一个小组件，不仅能显示刷新时间，而且还能手动点击刷新。不过是vue2的，有空在更新vue3的.

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

image.png

直接上组件代码

使用组件

以上，结束！