はじめに
Vue + VuexでREST APIを叩いてリスト表示する方法を書くときにAPI作るの面倒で、モックでやりましたので、そのやり方をこちらに書いておきます。
先述の記事内で使用するものを作れたらOKなので、GETリクエストしたら、Todoリスト表示に必要なデータを返してくれるものだけ作成します。
POSTとかも知りたい方は、vue-cli + axios でmock環境を雑に作ったのでメモが非常にわかりやすいです。
※ Vue.jsのプロジェクトは作成済とします。
1. axiosの準備
まずはaxiosをプロジェクトに追加します。
yarn add axios
2. モック実行の準備
package.jsonのscriptsに、mockを追加してyarn mockでモックを利用してサーバーを起動できるようにします。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"mock": "vue-cli-service serve --mode mock",
"lint": "vue-cli-service lint"
},
--mode mockをつけることで環境変数の読み込みファイルを.env.developmentから.env.mockに変えることが出来きるので、それぞれ、ファイルを追加して以下のように記述します。
VUE_APP_USE_MOCK=true
VUE_APP_USE_MOCK=false
このとき、命名規則として、頭にVUE_APPをつけるというのがありますのでご注意ください。
デフォルトでyarn serveすると、サーバーが立ち上がってHelloWorldコンポーネントが表示されるので、以下のように修正して表示してみます。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>モックかどうか{{ env }}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
env: null
}
},
mounted() {
this.env = process.env.VUE_APP_USE_MOCK
}
}
</script>
これで、yarn serve, yarn mockを実行すると、環境変数の読み込みが切り替わっていることが確認できるかと思います。
3. モックの実装
これで、実行の準備が整いましたので、モックを実装していきます。
import axios from 'axios';
import mock from './mock/api';
export const client = axios.create({
baseURL: 'https://test.com/url/of/your/api',
})
// モック起動
if (JSON.parse(process.env.VUE_APP_USE_MOCK)) {
mock.run(client)
}
export default {
/**
* Todoリスト取得API
* 結果はPromiseを返してハンドリングする
* @param {Object} params パラメータ
*/
getTodos (params) {
return client.get('/todos', params);
}
}
次に、↑でimport mock from './mock/api'としているので、そのファイルを追加してmockを実装します。
import MockAdapter from 'axios-mock-adapter';
let data = [
{ id: '1', body: '朝ごはん食べた' },
{ id: '2', body: '昼ごはん食べた' },
{ id: '3', body: '夜ごはん食べた' },
];
export default {
run: client => {
const mock = new MockAdapter(client);
mock.onGet('/todos').reply(200, data);
}
}
4. 実行を確認
実際に実行できるか確認します。
これもHelloWorldコンポーネントでやってしまいましょう。
<template>
<div class="hello">
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
</ul>
</div>
</template>
<script>
import Api from '../apis/api.js';
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
todos: null,
}
},
mounted() {
this.getTodos();
},
methods: {
getTodos () {
Api.getTodos()
.then(response => {
this.todos = response.data;
})
.catch(error => {
console.error(error);
})
}
}
}
</script>
これで、モックからデータを返せるようになりました。