Vue3でsetIntervalで定期的にAPI連携する際のTips

はじめに

全国1億2623万人のGARNET CROWファンの皆さん、こんにちは
@garnetddolphin です。
先日Vue3で定期的にAPIからデータを取得し、更新するというコードを書きました。
SPAでページを移動した際にclearIntervalが設定されておらず、setIntervalが残り続けてハマったのでTipsとして公開します。

実装

hoge.vue

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
・
・
・
    data() {
		return {
            // clearIntervalで削除するためタイマーを宣言しておく
			updateTimer: 0,
		}
	},
	methods: {
    async fetchAPIData(): Promise<void> {
        // API実行処理
    },
	async mounted() {
        // 宣言したタイマーにsetIntervalで実行する処理を代入
		this.updateTimer = setInterval(async () => {
			await this.fetchAPIData()
		}, 30000)
	},
	unmounted() {
        // ページを移動した際（コンポーネントインスタンスがアンマウントされた際）にはsetIntervalを削除する
        // Vue3のライフサイクルフック unmountedでタイマーをクリアする
		clearInterval(this.updateTimer)
	},
})
</script>

最後に

えるしっているか
ふろんとえんどは
おもしろい