@pinia/nuxt를 사용하는 경우 setInterval 외부에 HTTP 요청을 배치하면 모든 setInterval 반복에서 실행됩니다.

Question

<p>@pinia/nuxt 및 nuxt 3을 사용하여 타이머를 구축하려고 합니다. 타이머가 시작되면 데이터베이스를 동기화하기 위해 HTTP 요청도 시작하고 싶습니다. </p><p>제가 직면한 문제는 시작 작업을 호출할 때마다 setInterval 루프가 반복될 때마다 HTTP 요청이 이루어지며 이를 한 번만 실행하고 싶다는 것입니다.

피니아 모듈입니다. 구성 요소의 onClick 이벤트에서 시작 작업을 호출합니다. </p> <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>

Answer 1

댓글에서 언급했듯이 실시간 기능을 구현하는 올바른 방법은 소켓을 사용하는 것입니다. 그러나 폴링 방식으로 수행해야 하는 경우 다음 예와 유사하게 가드를 작성할 수 있습니다.

으아악

유용하길 바랍니다