如题，页面刷新
很多时候，页面数据可能会频繁整体刷新，基本原理都是通过定时器来刷新，至于具体方法，每个人都有不同的方法。
下面是我比较习惯用的方式: 写了两种，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,
}
在页面引入，定时刷新，控制状态变化
<template>
<div></div>
</template>
<script>
import { state,action } from './data';
export default {
computed: {
// 刷新
refreshRequest:()=> state.refreshRequest,
},
mounted() {
/**开启数据刷新 */
this.autoRefreshFn();
},
beforeDestroy() {
this.autoRefresh && clearInterval(this.autoRefresh );
this.autoRefresh = null;
},
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 '../../data';
import Api from "./api";
export default {
computed: {
// 刷新
refreshRequest:()=> state.refreshRequest
},
watch: {
/**数据刷新机制 */
refreshRequest: {
async handler(e) {
//重载数据函数
this.loadData();
},
immediate: false
}
},
mounted() {
//加载数据
this.loadData();
},
methods: {
async loadData(){
}
}
}
</script>
是不是非常简单实用，哪里需要重载数据，哪里就监控状态变化。不需要导出开启定时器，而且控制起来方便，不需要到处开定时器刷新接口数据。
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,
}
使用，定时控制变化
<script setup>
import { ref,computed,onMounted,onBeforeUnmount } from 'vue';
import { state,action } from './data';
const refreshRequest = computed({
get: () => state.refreshRequest,
set: (value) => action.updateRefreshRequest(value)
})
onMounted( () => {
// 开启定时刷新
autoRefershFn()
} )
let autoRefresh = ref(null);
const autoRefershFn = () => {
autoRefresh && clearInterval(autoRefresh );
autoRefresh = null;
// 具体多久刷新一次，看你自己需求，我这里示例5分钟刷新一次
autoRefresh = setInterval( ()=>{
refreshRequest.value = !refreshRequest.value;
// 也可以这样
// action.updateRefreshRequest( !refreshRequest.value );
}, 5*1000*60);
}
// 组件销户清理定时器
onBeforeUnmount( () => {
autoRefresh && clearInterval(autoRefresh );
autoRefresh = null;
} )
</script>
在需要刷新数据的地方引入，刷新数据
<script setup>
import { computed,watch } from 'vue';
import { state,action } from '../../data';
const refreshRequest = computed( () => state.refreshRequest )
const dataInfo = computed( () => state.dataInfo )
watch( refreshRequest, (newValue,oldValue) => {
console.log(newValue);
//加载数据
//this.loadData();
} )
</script>
以上，结束。
在送大家一个小组件，不仅能显示刷新时间，而且还能手动点击刷新。不过是vue2的，有空在更新vue3的.
配合这个状态使用非常舒服，在状态变化刷新数据的时候，这里会监控，显示刷新时间，同时也能手动点击来刷新，鼠标移入也会显示自动刷新频次，效果如下：
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 {
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');
}
},
methods: {
//手动点击刷新
clickRefresh(){
this.$emit( 'update:isUpdateTime',!this.isUpdateTime )
}
}
}
</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.sync="refreshRequest"></data-refresh>
</div>
</template>
<script>
import DataRefresh from 'components/data-refresh-time';
import { state, action } from '../../store';
export default {
components: {
DataRefresh
},
computed: {
// 刷新
refreshRequest:()=> state.refreshRequest,
},
watch: {
refreshRequest(){
// 干你该干的事情
}
},
};
</script>
<style lang="less" scoped>
@deep: ~'>>>';
</style>
