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.
P粉413704245
2023-07-28 14:34:18
<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, 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. </p><p>Voici le module pinia. J'appelle l'action de démarrage dans l'événement onClick du composant. </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 :
J'espère que c'est utile