如题，页面刷新
很多时候，页面数据可能会频繁整体刷新，基本原理都是通过定时器来刷新，至于具体方法，每个人都有不同的方法。
下面是我比较习惯用的方式:
定义一个变量，定时控制这个变量的变化，在需要刷新的地方监控这个变量，一旦变化立即重新加载数据。不多说，还是直接上代码吧。
定义变量，
我这里喜欢用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>
以上，结束！
网友评论