@pinia/nuxt を使用する場合、setInterval の外側に HTTP リクエストを配置すると、setInterval の反復ごとに実行されます。
<p>@pinia/nuxt と nuxt 3 を使用してタイマーを構築しようとしています。タイマーが開始したら、データベースを同期するための HTTP リクエストも開始したいと考えています。 </p><p>私が直面している問題は、start アクションを呼び出すたびに、setInterval ループの反復ごとに HTTP リクエストが作成され、それを 1 回だけ実行したいことです。 </p><p>これはピニアモジュールです。コンポーネントの onClick イベントで開始アクションを呼び出します。 </p>
<pre class="brush:php;toolbar:false;">state: () => ({
タイマー: {
ID:ヌル、
isRunning: false、
時間: 5、
タイマー: 0、
状態: null、
} タイマーとして、
})、
行動： {
始める（） {
this.timer.isRunning = true
this.syncTimer()
if (!this.timer.timer) {
this.timer.timer = setInterval(() => {
if (this.timer.time > 0) {
このタイマー時間 --
} それ以外 {
clearInterval(this.timer.timer)
this.reset()
}
}、1000)
}
}、
停止（） {
this.timer.isRunning = false
clearInterval(this.timer.timer)
this.timer.timer = 0
}、
リセット() {
this.stop()
this.timer.time = 1500
}、
同期タイマー() {
backendAPI<タイマー>('/api/タイマー', {
メソッド: 'POST'、
本体: this.timer
}).then(({ エラー, データ }) => {
if (!error.value) {
const id = data.value?.id ?? ""
this.timer.id = ID
this.timer.state = "作成されました"
}
})
}
}</pre>
<p>私のpackages.jsonファイルは次のとおりです:</p>
<pre class="brush:php;toolbar:false;">"devDependency": {
"@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",
"サス": "^1.62.0",
"vuetify": "^3.1.15"
}、
"依存関係": {
"@pinia/nuxt": "^0.4.11",
"ピニア": "^2.1.3",
"vite-plugin-vuetify": "^1.0.2"
}</pre>
<p><br /></p>
