Lors de l'utilisation de @pinia/nuxt, le placement de la requête HTTP en dehors de setInterval sera exécuté à chaque itération de 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, une requête HTTP est effectuée pour chaque itération de la boucle setInterval, et je ne souhaite l'exécuter qu'une seule fois.

Voici le module pinia. J'appelle l'action de démarrage dans l'événement onClick du 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);
  },
  // ...
}

J'espère que c'est utile