Refactoring code module 12_evaluatePersonal

src/modules/12_evaluatePersonal/views/DetailPage.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onBeforeMount } from "vue";
 import { useQuasar } from "quasar";
+
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
 /** impolerType*/
 import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/response/evalute";
@@ -12,36 +15,31 @@ import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/
 import Tab1 from "@/modules/12_evaluatePersonal/components/Detail/Tab1.vue"; // ชำนาญการ
 import Tab2 from "@/modules/12_evaluatePersonal/components/Detail/Tab2.vue"; // ชำนาญการพิเศษ
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
-
 /** use*/
 const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
 const router = useRouter();
 const $q = useQuasar();
 const route = useRoute();
-
 const { showLoader, hideLoader, messageError } = mixin;
 
 const id = ref<string>(route.params.id as string); // id รายการประเมิน
+const data = ref<PersonInformation>(); //ข้อมูลคุณสมบัติ
+const prefix = ref<string>(""); //คำนำหน้ส
+const fullName = ref<string>(""); //ชื่อ-นามสกุล
 
-const data = ref<PersonInformation[]>([]);
-const prefix = ref<string>("");
-const fullName = ref<string>("");
-
-/** funmction เรียกขอ้มูลคุณสมบัติ*/
+/**
+ *  funmction เรียกข้อมูลคุณสมบัติ
+ */
 async function fetchFeature() {
   showLoader();
   await http
     .get(config.API.evaluateGetDetail(id.value))
     .then((res) => {
       data.value = res.data.result;
-      const person: any = data.value;
       if (data.value) {
-        fullName.value = person.fullName;
-        prefix.value = person.prefix;
+        fullName.value = data.value.fullName;
+        prefix.value = data.value.prefix;
       }
     })
     .catch((e) => {
@@ -54,8 +52,10 @@ async function fetchFeature() {
     });
 }
 
-/** HookLifecycle*/
-onMounted(async () => {
+/**
+ * HookLifecycle ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onBeforeMount(async () => {
   await fetchFeature();
 });
 </script>