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.
P粉596191963
2023-07-27 16:02:59
<p>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. </p><p>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. </p><p>Ce qui suit est mon module pinia. J'appelle l'action de démarrage via l'événement onClick dans le composant. </p><p><code></code><code></code></p>
<pre class="brush:php;toolbar:false;">é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<Timer>('/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éé"
}
})
}
}</pré>
<p>Mon fichier packages.json est le suivant :</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"
},
"dépendances": {
"@pinia/nuxt": "^0.4.11",
"pinia": "^2.1.3",
"vite-plugin-vuetify": "^1.0.2"
}</pré>
<p><br /></p>
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 :
Ça devrait aller