【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita

はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。

[monorod]

まったく関係ないけど、PostsRepositoryなのにgetだなんて紛らわしいよなって思った

[h_taiji]

どうせならファクトリへ文字列渡しではなく、メソッド呼び出しにしたい、というか、する。 flux系のtypescript対応と同じ結末になりそうだから

[letsspeak]

なんならSSR時にはProxyとして情報を弄ったりしなきゃならんからきちんとせなあかんのよね

[tkmkg8m]

axiosをラップしたRepository。エンティティごとにXyzsRepository。XyzsRepositoryに対してget()、getXyz()、create()などを呼ぶ。XyzsRepositoryを取得するためのRepositoryFactory。

[headless_pasta]

ちょうどこれまわりを作らなきゃいけないので試してみるか。たしかにいつもvuexが肥大化してしまうので良さげな気がしている。

[kijtra]

vuex の action でよくない…？

[mayumayu_nimolove]

わかっちゃいるけど。まああとで試してみよう。

[kenichi_odo]

Get入ってるのにPostはわかりにくい

[kashisan]

【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス)

[h1t0cH1]

これ見ます、やりたいけど、できてないです、はい

[masatotoro]

“ファイル名はリソースの接続確立する責任があるため、Repository.js”