[Nuxt 3] วิธีการทำไฟล์ function js เพื่อเรียกใช้ในทุกหน้า

บางทีเราไม่ได้อยากสร้างฟังก์ชั่นนี้ทุกหน้า เพราะมันมีการเรียกหลายๆ หน้า ไม่ได้เรียกหน้าเดียว เช่น อันนี้อยากสร้างฟังก์ชั่นที่จะ Mock up อาเรย์เพื่อทำการวนลูปแบบไม่ต้องมีข้อมูล ปกติเราต้องเขียนแบบนี้

// file: pages/index.vue

<template>
  <ul>
    <li v-for="item in Array.from({ length: length }, (_, i) => i + 1)">{{ item }}</li>
  </ul>
</template>

สร้างโฟลเดอร์ composables

โฟลเดอร์นี้จะเป็นคล้ายๆ โฟลเดอร์ assets/js แหละ แต่เวลาเราจะเรียกใช้งานฟังก์ชั่นภายใน เราสามารถเรียกใช้ได้เลย โดยที่ไม่ต้อง import ไฟล์เข้ามาก่อน

// file: composables/generator.js

export const generateMockupArray = (length) => {
  return Array.from({ length: length }, (_, i) => i + 1);
}

พอมีฟังก์ชั่นนี้แล้ว ตัวหน้าแสดงผลก็จะเหลือแค่นี้ อ่านเข้าใจง่ายกว่าเยอะ

// file: pages/index.vue

<template>
  <ul>
    <li v-for="item in generateMockupArray(10)">{{ item }}</li>
  </ul>
</template>