@pinia/nuxt를 사용할 때 setInterval 루프 내에서 실행되는 HTTP 요청은 각 setInterval 반복에서 실행됩니다.
<p>@pinia/nuxt 및 nuxt 3을 사용하여 타이머를 구축하려고 합니다. 타이머가 시작되면 데이터베이스를 동기화하기 위해 HTTP 요청도 시작하고 싶습니다. </p><p>내가 직면한 문제는 시작 작업을 호출할 때마다 setInterval 루프가 반복될 때마다 HTTP 요청이 실행되는 반면, 나는 이 요청이 한 번만 실행되기를 원한다는 것입니다. </p><p>다음은 제 피니아 모듈입니다. 구성 요소의 onClick 이벤트를 통해 시작 작업을 호출합니다.
<pre class="brush:php;toolbar:false;">상태: () =>
타이머: {
아이디: null,
isRunning: 거짓,
시간: 5,
타이머: 0,
상태: null,
} 타이머로,
}),
작업: {
시작() {
this.timer.isRunning = true
this.syncTimer()
if (!this.timer.timer) {
this.timer.timer = setInterval(() => {
if (this.timer.time > 0) {
this.timer.time--
} 또 다른 {
클리어 인터발(this.timer.timer)
this.reset()
}
}, 1000)
}
},
멈추다() {
this.timer.isRunning = 거짓
클리어 인터발(this.timer.timer)
this.timer.timer = 0
},
초기화() {
this.stop()
this.timer.time = 1500
},
동기화타이머() {
backendAPI<타이머>('/api/timer', {
메소드: '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",
"sass": "^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>
