Nuxt.js + axios + TypescriptでRepositoryパターンを実現する

こんにちはキッチンカーアーティストのジャマです。

キッチンカーアーティストジャマ

キッチンカーアーティストをやる傍らプログラマーをやっています。
最近は表題の通りNuxt.js + axios + TypescriptでRepositoryパターンを実現しました。
備忘録を兼ねて実装方法を残しておきたいと思います。

【Nuxt.js】axiosのAPI共通処理をラップし、Repositoryパターンを実現する(TypeScript) | SAGA.TXT

まずはこのブログをもとに実装を行いました。

しかし！！！

色々頑張っても動きませんでした。

誤植なのか開発環境のバージョンが違うのか、とにかく動かなかったです。
動かすために修正した内容を勝手に指摘させて頂きます。

ブログの「３．repositoryフォルダを作成し、UserRepository.tsを作成する。」の/repository/UserRepositoryは

/repository/UserRepository.ts

が正しかったです。ファイルを作る時にUserRepositoryというファイルを作ったのですが、UserRepository.tsというファイルを作るべきでした。

上記の修正に連動して、
import UserRepository from '@/repository/UserRepository'が

import UserRepository from '@/repository/UserRepository.ts'

に変更になります。

const userRepository = new UserRepository($axios)は

const userRepository = new UserRepository(context.$axios)

が正しいです。

このあたりを修正してなんとか動くようになりました。
Nuxt + Typescriptはまだまだ慣れないので、詰まると時間がかかりますね。