Lors de l'utilisation de @pinia/nuxt, les requêtes HTTP exécutées dans une boucle setInterval sont exécutées à chaque itération setInterval.

Question

J'essaie de créer une minuterie en utilisant @pinia/nuxt et nuxt 3. Lorsque le minuteur démarre, je souhaite également lancer une requête HTTP pour synchroniser ma base de données.

Le problème auquel je suis confronté est que chaque fois que j'appelle l'action de démarrage, la requête HTTP est exécutée à chaque itération de la boucle setInterval, alors que je souhaite qu'elle ne soit exécutée qu'une seule fois.

Ce qui suit est mon module pinia. J'appelle l'action de démarrage via l'événement onClick dans le composant.

état : () =>
  minuterie : {
    identifiant : nul,
    isRunning : faux,
    temps: 5,
    minuterie: 0,
    état : nul,
  } comme minuterie,
}),
Actions: {
  commencer() {
    this.timer.isRunning = vrai
    ceci.syncTimer()
    si (!this.timer.timer) {
      this.timer.timer = setInterval(() => {
        si (this.timer.time > 0) {
          cette.minuterie.heure--
        } autre {
          clearInterval(this.timer.timer)
          ceci.reset()
        }
      }, 1000)
    }
  },
  arrêt() {
    this.timer.isRunning = faux
    clearInterval(this.timer.timer)
    ceci.timer.timer = 0
  },
  réinitialiser() {
    ceci.stop()
    ceci.timer.time = 1500
  },
  syncTimer() {
    backendAPI('/api/timer', {
      méthode : 'POST',
      corps : this.timer
    }).then(({ erreur, données }) => {
      si (!error.value) {
        const id = data.valeur?.id ""
        this.timer.id = identifiant
        this.timer.state = "créé"
      }
    })
  }
}
Mon fichier packages.json est le suivant :
"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"
  },
  "dépendances": {
    "@pinia/nuxt": "^0.4.11",
    "pinia": "^2.1.3",
    "vite-plugin-vuetify": "^1.0.2"
  }

Answer 1

Comme je l'ai mentionné dans les commentaires, la bonne façon d'implémenter la fonctionnalité temps réel est d'utiliser des sockets. Cependant, si vous devez le faire de manière sondage, vous pouvez écrire une garde, semblable à l'exemple suivant :

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);
  },
  // ...
}

Ça devrait aller