当使用@pinia/nuxt时,在setInterval循环中执行的HTTP请求会在每次setInterval迭代中执行。
P粉596191963
P粉596191963 2023-07-27 16:02:59
0
1
568
<p>我正在尝试使用@pinia/nuxt和nuxt 3构建一个定时器。当定时器启动时,我还想发起一个HTTP请求来同步我的数据库。</p><p>我面临的问题是,每当我调用start动作时,HTTP请求都会在setInterval循环的每次迭代中执行,而我只希望它执行一次。</p><p>以下是我的pinia模块。我是通过组件中的onClick事件调用start动作的。</p><p><code></code><code></code></p> <pre class="brush:php;toolbar:false;">state: () => ({ timer: { id: null, isRunning: false, time: 5, timer: 0, state: null, } as Timer, }), actions: { start() { this.timer.isRunning = true this.syncTimer() if (!this.timer.timer) { this.timer.timer = setInterval(() => { if (this.timer.time > 0) { this.timer.time-- } else { clearInterval(this.timer.timer) this.reset() } }, 1000) } }, stop() { this.timer.isRunning = false clearInterval(this.timer.timer) this.timer.timer = 0 }, reset() { this.stop() this.timer.time = 1500 }, syncTimer() { backendAPI<Timer>('/api/timer', { method: 'POST', body: this.timer }).then(({ error, data }) => { if (!error.value) { const id = data.value?.id ?? "" this.timer.id = id this.timer.state = "created" } }) } }</pre> <p>我的packages.json文件如下:</p> <pre class="brush:php;toolbar:false;">"devDependencies": { "@fortawesome/fontawesome-free": "^6.4.0", "@fullcalendar/core": "^6.1.8", "@fullcalendar/daygrid": "^6.1.8", "@fullcalendar/interaction": "^6.1.8", "@fullcalendar/timegrid": "^6.1.8", "@fullcalendar/vue3": "^6.1.8", "@iconify/vue": "^4.1.1", "@kevinmarrec/nuxt-pwa": "^0.17.0", "@mdi/font": "^7.2.96", "@nuxtjs/google-fonts": "^3.0.0", "@pinia-plugin-persistedstate/nuxt": "^1.1.1", "nuxt": "3.4.2", "sass": "^1.62.0", "vuetify": "^3.1.15" }, "dependencies": { "@pinia/nuxt": "^0.4.11", "pinia": "^2.1.3", "vite-plugin-vuetify": "^1.0.2" }</pre> <p><br /></p>
P粉596191963
P粉596191963

全部回复(1)
P粉384679266

正如我在评论中提到的,实现实时功能的正确方法是使用sockets。但是,如果您需要以轮询的方式进行操作,可以编写一个guard,类似于以下示例:

actions: {
  start() {
    if (this.timer.isRunning) return;

    this.timer.isRunning = true;
    this.syncTimer();

    this.timer.timer = setInterval(() => {
      if (this.timer.time > 0) {
        this.timer.time--;
      } else {
        clearInterval(this.timer.timer);
        this.reset();
      }
    }, 1000);
  },
  // ...
}

应该可以

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板