script setup：App.vue、EditorHome.vueを移行 (VOICEVOX#1206)

sevenc-nanashi · Feb 15, 2023 · 1b1c345 · 1b1c345
1 parent 9aab73c
commit 1b1c345
Show file tree

Hide file tree

Showing 2 changed files with 518 additions and 612 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -4,54 +4,44 @@
   </error-boundary>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useStore } from "@/store";
 import ErrorBoundary from "@/components/ErrorBoundary.vue";
-import { defineComponent, watch, computed } from "vue";
+import { watch, computed } from "vue";
 import { useGtm } from "@gtm-support/vue-gtm";
 import { useRoute } from "vue-router";
 
-export default defineComponent({
-  name: "App",
+const store = useStore();
+store.dispatch("INIT_VUEX");
 
-  components: {
-    ErrorBoundary,
-  },
-
-  setup() {
-    const store = useStore();
-    store.dispatch("INIT_VUEX");
-
-    // URLパラメータに従ってマルチエンジンをオフにする
-    const route = useRoute();
-    const query = computed(() => route.query);
-    watch(query, (newQuery) => {
-      if (newQuery) {
-        store.dispatch(
-          "SET_IS_MULTI_ENGINE_OFF_MODE",
-          newQuery["isMultiEngineOffMode"] === "true"
-        );
-      }
-    });
-
-    // Google Tag Manager
-    const gtm = useGtm();
-    watch(
-      () => store.state.acceptRetrieveTelemetry,
-      (acceptRetrieveTelemetry) => {
-        gtm?.enable(acceptRetrieveTelemetry === "Accepted");
-      },
-      { immediate: true }
+// URLパラメータに従ってマルチエンジンをオフにする
+const route = useRoute();
+const query = computed(() => route.query);
+watch(query, (newQuery) => {
+  if (newQuery) {
+    store.dispatch(
+      "SET_IS_MULTI_ENGINE_OFF_MODE",
+      newQuery["isMultiEngineOffMode"] === "true"
     );
+  }
+});
 
-    // フォントの制御用パラメータを変更する
-    watch(
-      () => store.state.editorFont,
-      (editorFont) => {
-        document.body.setAttribute("data-editor-font", editorFont);
-      },
-      { immediate: true }
-    );
+// Google Tag Manager
+const gtm = useGtm();
+watch(
+  () => store.state.acceptRetrieveTelemetry,
+  (acceptRetrieveTelemetry) => {
+    gtm?.enable(acceptRetrieveTelemetry === "Accepted");
   },
-});
+  { immediate: true }
+);
+
+// フォントの制御用パラメータを変更する
+watch(
+  () => store.state.editorFont,
+  (editorFont) => {
+    document.body.setAttribute("data-editor-font", editorFont);
+  },
+  { immediate: true }
+);
 </script>