@pinia/nuxt を使用する場合、setInterval の外側に HTTP リクエストを配置すると、setInterval の反復ごとに実行されます。

Question

@pinia/nuxt と nuxt 3 を使用してタイマーを構築しようとしています。タイマーが開始したら、データベースを同期するための HTTP リクエストも開始したいと考えています。

私が直面している問題は、start アクションを呼び出すたびに、setInterval ループの反復ごとに HTTP リクエストが作成され、それを 1 回だけ実行したいことです。

これはピニアモジュールです。コンポーネントの onClick イベントで開始アクションを呼び出します。

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 = "作成されました"
      }
    })
  }
}

私のpackages.jsonファイルは次のとおりです:

"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"
  }

Answer 1

コメントで述べたように、リアルタイム機能を実装する正しい方法はソケットを使用することです。ただし、ポーリング方式で実行する必要がある場合は、次の例のようなガードを作成できます:

リーリー

お役に立てば幸いです