みなさん、こんにちは。どんぶラッコです。
今日は、Vue.jsでリポジトリパターンを使ってみよう！という内容です。
本内容は、以下の記事がとても参考になりました。
上記内容を基に自分なりに使いやすい様にカスタマイズしたので、そのパターンを公開します。
リポジトリパターンとは？
リポジトリパターン とは、データ操作のロジックをビジネスロジックから分離することです。
例えば、Vue.js2であれば データ取得のロジックを axios モジュールを使いつつこんなふうに記述したりしませんか？
// ...前略
methods: {
async getHogeData(){
const res = await axios.get('/api/hoge')
// ....略
}
}でもこれ、もしhogeデータを取得するURLを /api/v2/hoge に変えたら、いちいち全てのvueファイルの中身を書き換えに行かなくてはいけないですね。
それは面倒臭いですし、書き換えを忘れてしまうファイルが出てきてしまうかもしれません。
そこで登場するのが リポジトリパターン という考え方なのです。
データを取得するためのモジュールを作成し、vueファイル側ではそのモジュールを読むこむようにします。
そうしておくことで、万が一データの取得先が変わったとしても、作成したモジュールファイルの中身を書き換えればOKになります。
ということで、早速始めていきましょう！
今回は Laravel-mixを用いて Laravelの上に乗っかっている Vueファイルに対して設定をする想定で記述をしていきます。
ただし、Nuxt.jsなどの他のフレームワークを使ったとしてもやること自体は変わらないです。是非参考にしてみてください！
コーディング例
まずは Repository.js というファイルを作成します。私の場合は、Repositories というディレクトリを作成し、その中に作成しました。
import axios from 'axios'
// laravel-mix ではない場合 以下の２行は不要
axios.defaults.withCredentials = true
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
export default (resource) => {
return {
index: () => {
return axios.get(`/api/${resource}`)
},
store: (payload) => {
return axios.post(`/api/${resource}`, payload)
},
show: (id) => {
return axios.get(`/api/${resource}/${id}`)
},
update: (id, payload) => {
return axios.put(`/api/${resource}/${id}`, payload)
},
delete: (id) => {
return axios.delete(`/api/${resource}/${id}`)
}
}
}
参考先URLとは異なり、Repositoryの時点でREST APIの型を作成してしまいます。
index, store … などの命名規則は Laravel の make:controller –resource で生成される命名に準拠しています。
例えば photos というModelに対しては下記のメソッドが生成されます。
| 動詞 | URI | アクション | ルート名 |
|---|---|---|---|
| GET | /photos | index | photos.index |
| GET | /photos/create | create | photos.create |
| POST | /photos | store | photos.store |
| GET | /photos/{photo} | show | photos.show |
| GET | /photos/{photo}/edit | edit | photos.edit |
| PUT/PATCH | /photos/{photo} | update | photos.update |
| DELETE | /photos/{photo} | destroy | photos.destroy |
参考: https://readouble.com/laravel/8.x/ja/controllers.html
次に、取得したいModelのリポジトリを作っていきます。
ここでは、 hogeRepository.js としておきます。
import Repository from './Repository'
const resource = 'hoge'
const repository = Repository(resource)
export default repository最後に、 RepositoryFactory.js を作成し、その中に記述していきます。
import HogeRepository from './hogeRepository'
const repositories = {
hoge: HogeRepository
}
export const RepositoryFactory = {
get: name => repositories[name]
}
これで完成です！
では、先ほどの method例を書き換えてみましょう。
import { RepositoryFactory } from '../Repositories/RepositoryFactory'
const HogeRepository = RepositoryFactory.get('hoge')
export default {
// 略
methods: {
async getHogeData(){
const res = await HogeRepository.index()
// ....略
}
}
}以上です！是非みなさんも使ってみてください♪
