Vue3でsleepを実装する

main.jsでフィルターを登録

Vue3ではmixinが廃止されたため、main.jsでフィルターとして関数を登録します。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$filters = {
  async sleep(time) {
    return new Promise( resolve => setTimeout(resolve, time) );
  }
};

app.mount('#app')

sleepという関数で登録しました。引数のミリ秒分setTimeoutするだけの簡単な関数です。もう少し複雑な条件を追加したい場合は、関数に条件を書いてpromiseを返せばOKです。

これだけで、Vueプロジェクト内の全てのコンポーネントからsleepを呼び出すことが出来ます。

componentで使ってみる

実際にcomponentで使ってみましょう。grobalのfiltersに登録してあるので、呼び出しは「this.$filters.sleep()」です。

<template>
  <h1>Vue 3 Sleep</h1>
</template>

<script>
export default {
  async created() {
    console.log('sleep start');
    await this.$filters.sleep(500);
    console.log('sleep end');
  }  
}
</script>

「sleep start」とコンソールにログが表記された0.5秒後に「sleep end」が表示されればOKです。

注意点としては、async/awaitで呼び出す点。これがないと動きません。Vue serveでチェックしてればエラーが出るので気づくかと思います。

Vue.jsで複雑なデータを扱うWebアプリを使っていると、タイミング調整などで意外と使う機会があるので、あると便利です。