clone code

src/stores/data.ts

@@ -0,0 +1,102 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useDataStore = defineStore("data", () => {
+  // ref() คือการประกาศ state เหมือน vuex
+  const count = ref<number>(0);
+  const loader = ref<boolean>(false);
+
+  const expandedReport2 = ref<string[]>([]);
+  const selectedReport2 = ref<string>("");
+  const expandedRegister = ref<string[]>([]);
+  const selectedRegister = ref<string>("");
+  // computed() คือการประกาศ getters เหมือน vuex
+  const doubleCount = computed(() => count.value * 2);
+  // function() คือการประกาศ actions เหมือน vuex
+  const increment = () => {
+    count.value++;
+  };
+  //  tabData เป็น paramert ใช้เปรียนเทียบ tab ให้ active
+  const tabData = ref<string>("");
+  /**
+   * active tab หน้า รายละเอียดทะเบียนประวัติ
+   * @param val string เป็นชื่อของ ตัวนั้นๆ
+   */
+  const changeTab = (val: string) => {
+    tabData.value = val;
+  };
+
+  /**
+   * active tab หน้า รายละเอียดทะเบียนประวัติ
+   * @param val boolean false = close , true = open
+   */
+  const loaderPage = (val: boolean) => {
+    loader.value = val;
+  };
+
+  /**
+   * เปิด tree จัดการบัญชี2
+   * @param val string เป็นชื่อของ ตัวนั้นๆ
+   */
+  const changeTreeReport2 = (e: string[], s: string) => {
+    expandedReport2.value = e;
+    selectedReport2.value = s;
+  };
+
+  /**
+   * เปิด tree ทะเบียนประวัติ
+   * @param val string เป็นชื่อของ ตัวนั้นๆ
+   */
+  const changeTreeRegister = (e: string[], s: string) => {
+    expandedRegister.value = e;
+    selectedRegister.value = s;
+  };
+
+  return {
+    count,
+    doubleCount,
+    increment,
+    tabData,
+    changeTab,
+    loader,
+    loaderPage,
+    expandedReport2,
+    selectedReport2,
+    changeTreeReport2,
+    expandedRegister,
+    selectedRegister,
+    changeTreeRegister,
+  };
+});
+
+// การเขียนแบบ composition api
+// ตัวอย่างการใช้งาน use...Store() ตามชื่อที่ตั้ง
+
+// import { useDataStore } from '@/stores/data'
+
+//storeToRefs ใช้กรณีที่เราจะแปลงค่าเป็น state ใน หน้านั้น
+
+// import { storeToRefs } from 'pinia'
+
+// export default {
+//     setup() {
+//       const store = useDataStore()
+
+// ***********************************
+// พยายามไม่ให้ ชื่อ เหมือนกับ props ** ตัวอย่างปกติ
+// const { count, doubleCount, increment } = store
+// ***********************************
+
+// ตัวอย่าง แปลงค่า store เป็น state หรือ ref
+// const { name, doubleCount } = storeToRefs(store)
+// ถ้าเป็น function เรียกแยกอีกทีก็ได้
+// const { increment } = store
+// ***********************************
+
+//return {
+// count,
+// doubleCount,
+// increment
+//       }
+//     },
+//   }