javascript - VueJs 从 Vuetify 重新加载一个简单的表

Question

所以我有一个 vuetify 简单的表格，显示预约的可用时间。但是，这个时间是从数据库中提取的，并且该信息每 5 分钟更改一次（基于预订或取消的人）。用户将需要刷新表以获取最新更改。我试图在 VueJs 中引入某种自动刷新，每 5 分钟重新加载一次数据。这是我现在被调用的方法

created(){
    this.fetchAvailableTimeSlotsData75();

  },


    method:{

  fetchAvailableTimeSlotsData75() {
     this.$axios.get('appointments75', {
            params: {
              date: this.isCurrentMonth(this.strSelectedDate) ? '' : this.strSelectedDate,
              week: this.intPageNumber
            }
          })
            .then((objResponse) => {
              if(objResponse.status == 200){
                // console.log(objResponse.data)
                this.total = objResponse.data.total;
                this.arrAvailableDates    = objResponse.data.dates;
                this.arrAppointmentsData  = objResponse.data.data;
                this.getAppointments();
              }
            })
            .catch((objError) => {
              
            })
            .finally(() => {
              this.blnLoading = false;
              this.snackbar = false
            });}
}

在 VueJs 中解决这个问题的最佳方法是什么？有任何想法吗？

标签： javascriptvue.jsaxiosnuxt.js

Answer 1

简单地说，使用setInterval：

var _timerId;

export default {
  data: () => ({
    pollingInterval: 1000 * 60 * 5
  }),

  created() {
    this.startPolling(true);
  },

  methods: {
    startPolling(init = false) {
      if (init) {
        // Call it immediately
        this.fetchAvailableTimeSlotsData75();
        this.startPolling();
        return;
      }

      _timerId = setInterval(this.fetchAvailableTimeSlotsData75, this.pollingInterval);
    }
  },

  // Optional
  destroyed() {
    clearInterval(_timerId);
  }
}