Ich versuche, einen Timer mit @pinia/nuxt und nuxt 3 zu erstellen. Wenn der Timer startet, möchte ich auch eine HTTP-Anfrage initiieren, um meine Datenbank zu synchronisieren.

Das Problem, mit dem ich konfrontiert bin, ist, dass jedes Mal, wenn ich die Startaktion aufrufe, eine HTTP-Anfrage für jede Iteration der setInterval-Schleife gestellt wird und ich sie nur einmal ausführen möchte.

Dies ist das Pinia-Modul. Ich rufe die Startaktion im onClick-Ereignis der Komponente auf.

state: () => Timer: { ID: null, isRunning: false, Zeit: 5, Timer: 0, Zustand: null, } als Timer, }), Aktionen: { Start() { this.timer.isRunning = true this.syncTimer() if (!this.timer.timer) { this.timer.timer = setInterval(() => { if (this.timer.time > 0) { this.timer.time-- } anders { clearInterval(this.timer.timer) this.reset() } }, 1000) } }, stoppen() { this.timer.isRunning = false clearInterval(this.timer.timer) this.timer.timer = 0 }, zurücksetzen() { this.stop() this.timer.time = 1500 }, syncTimer() { backendAPI('/api/timer', { Methode: 'POST', Körper: this.timer }).then(({ Fehler, Daten }) => { if (!error.value) { const id = data.value?.id ?? this.timer.id = id this.timer.state = "erstellt" } }) } }

Meine Datei packets.json lautet wie folgt:

"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“ }, "Abhängigkeiten": { „@pinia/nuxt“: „^0.4.11“, "pinia": "^2.1.3", „vite-plugin-vuetify“: „^1.0.2“ }