メソッドを.vueファイルにimportして使用する方法　(Vue3/Nuxt)

ファイルをimportする方法

何気なく使用していたimportやexportの利用方法について改めて記事を書いてみた。
筆者の備忘録である。

project/page/index.vueにproject/composables/test.tsの関数を使えるようにする。
その為に下記二つのファイルを用意する

project/page/index.vue側

<template>
 <div> test表示 </div>
 <button @click="handleClick">クリックしてください</button>
</template>

<script setup lang="ts">
// ここで外部のファイルをimportする
 import { test } from 'composables/test';
 const test1 = test()
 
 const handleClick = () => {
    console.log(test1.testShow()) // 1と表示される  
 }
</script>

project/composables/test.ts側

// exportすることで他のファイルにも使用できるようにする
export const test = () => {
    const testShow = () => { 
    let count = 1
        return count   
   }
    return { testShow }
}

index.vue側でボタンを押した際に、test.tsファイル内で定義したcountの値がコンソールに表示される。

Javascript(TypeScript)ではexport(公開)したものをimportを使って取込して利用できる機能がある。

上記は超簡単な例だが、これを利用してユーザーのログインやAPIなどを画面側で記載するのではなく、一つのファイルにまとめて作成でき管理しやすい。

以上