refactor: useMountedを追加し、mountedの管理を統一

src/components/Sing/SequencerPitch.vue

@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { ref, watch, computed, onUnmounted, onMounted } from "vue";
+import { useMounted } from "@/composables/useMounted";
 import * as PIXI from "pixi.js";
 import AsyncLock from "async-lock";
 import { useStore } from "@/store";
@@ -91,6 +92,8 @@
   return store.getters.SELECTED_TRACK.singer != undefined;
 });
 
+const { mounted } = useMounted();
+
 const canvasContainer = ref<HTMLElement | null>(null);
 const canvas = ref<HTMLCanvasElement | null>(null);
 let resizeObserver: ResizeObserver | undefined;
@@ -276,9 +279,6 @@
   renderInNextFrame = true;
 };
 
-// onMountedのときにtrueになるだけのref
-const mounted = ref(false);
-
 const asyncLock = new AsyncLock({ maxPending: 1 });
 
 // NOTE: mountedをwatchしているので、onMountedの直後に必ず１回実行される
@@ -332,8 +332,6 @@
 );
 
 onMounted(() => {
-  mounted.value = true;
-
   const canvasContainerElement = canvasContainer.value;
   const canvasElement = canvas.value;
   if (!canvasContainerElement) {

src/composables/useAutoScrollOnEdge.ts

@@ -1,4 +1,5 @@
-import { ComputedRef, onMounted, onUnmounted, ref, Ref, watch } from "vue";
+import { ComputedRef, onMounted, onUnmounted, Ref, watch } from "vue";
+import { useMounted } from "@/composables/useMounted";
 import {
   calcMinimumDistanceVectorRectAndPoint,
   Rect,
@@ -64,7 +65,7 @@ export const useAutoScrollOnEdge = (
     autoScrollState.animationId = requestAnimationFrame(autoScrollAnimation);
   };
 
-  const mounted = ref(false);
+  const { mounted } = useMounted();
 
   watch([enable, mounted], ([enableValue, mountedValue]) => {
     if (!mountedValue) {
@@ -110,7 +111,6 @@ export const useAutoScrollOnEdge = (
   };
 
   onMounted(() => {
-    mounted.value = true;
     window.addEventListener("mousemove", onMouseMove);
   });
 

src/composables/useMounted.ts

@@ -0,0 +1,15 @@
+import { ref, onMounted } from "vue";
+
+/**
+ * マウントしたときにtrueになるフラグを提供する。
+ * マウントしてすぐ一度だけ処理を実行したいときに便利。
+ */
+export function useMounted() {
+  const mounted = ref(false);
+
+  onMounted(() => {
+    mounted.value = true;
+  });
+
+  return { mounted };
+}