vue3のscriptタグ内のメソッドを、外部のtsファイルに定義して呼び出す！

挨拶

こんにちは！
今回がQiita初投稿になります💦
暖かい目で閲覧いただけると幸いです。

この記事でやっていること

Vue3でscriptタグにメソッドを書いているとコードが長くなり読みづらいので、外部のファイルから呼び出し、scriptタグ内のコードを簡潔にすることが目的です。
axiosでバックエンドに接続するAPIを外部ファイルに定義しています！

axiosとは

[vue.jsを使ってaxiosを学ぶ] (https://reffect.co.jp/vue/vue-axios-learn) にて以下のように説明されています。

axiosはPromiseベースのHTTP ClientライブラリでGETやPOSTのHTTPリクエストを使ってサーバからデータの取得、サーバへのデータ送信を通してデータの追加、更新、削除を行うことができます。

改善前のコード

TaskIndex.vue

<script setup lang="ts">
import axios from "axios";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter()
const tasks = ref<object>({})

onMounted(() => {
  getTasks()
})

// タスクの一覧を取得
const getTasks = () => {
  axios.get('http://localhost:8080/tasks')
  .then(function (response) {
    tasks.value = response.data.datas;
  })
  .catch(function (error) {
    console.log(error);
  })
}
</script>

改善後のコード

TaskIndex.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import {getTasks, deleteTask} from "../../api/TaskApi/";

const router = useRouter()
const tasks = ref<object>({})

onMounted(async () => {
  tasks.value = await getTasks();
})
</script>

TaskApi.ts

import axios from "axios";
import { ref } from "vue";

const data = ref<object>({})

// タスクの一覧を取得
export const getTasks = async () => {
  await axios.get('http://localhost:8080/tasks')
  .then(function (response) {
    data.value = response.data.datas;
  })
  .catch(function (error) {
    console.log(error);
  })

  return data.value
}

• tsファイルで定義したメソッド名の前にexportをつけてあげると、他のファイルでも呼び出すことができます
• バックエンドから取得した値はdataに入っているので、その値を戻り値として呼び出し元の値に返します

おわりに

今回の改修でメソッドをtsファイルに書き分けたことで

• コードの記述量が減らせる
• 他のファイルでも簡単にメソッドを呼び出せる
  などのメリットがあると分かりました。

複数の箇所で呼び出されるメソッドに関しては、積極的に共通化して読みやすいコードになるよう心がけたいと思います！

参考文献