Help us understand the problem. What is going on with this article?

Nuxt.jsのaxiosを秒でモックするnpmモジュールの入門サンプル

Nuxt.jsって環境構築ラクだからついAPIの実装を待たずにフロント開発を始めたくなりますよね!

無題.png

事前準備

Nuxt.jsとAxios ModuleがインストールされたNodeプロジェクトを用意します。
個人的にはcreate-nuxt-appでaxiosも同時にインストールするのをおススメします。
必要な構成を簡単に作れます。

インストール

$ npm i axios-mock-server

プラグイン作成

Nuxt独自の $axios をモック化します。

plugins/mock.js
import mock from '~/mocks/$mock.js' // ビルド時に自動生成されるファイル

export default ({ $axios }) => mock($axios)

Nuxt.jsの設定ファイル

作成したプラグインのパスを追記します。

nuxt.config.js
export default {
  plugins: ['~/plugins/mock.js']
}

APIエンドポイント定義

mocks/users.js のファイルを作成し /users のGETとPOSTを定義します。

mocks/users.js
const users = [{ id: 0, name: 'taro' }]

export default {
  get: () => [200, users], // 返り値は [status, body?, headers?]

  post: ({ data }) => {
    users.push({
      id: users.length,
      name: data.name
    })

    return [201]
  }
}

普段通りにaxiosを使う

pages/index.vue
<template>
  <div />
</template>

<script>
export default {
  async mounted() {
    await this.$axios.$post('/users', { name: 'yoko' })

    const users = await this.$axios.$get('/users')
    console.log(users) // [{ id: 0, name: 'taro' }, { id: 1, name: 'yoko' }]
  }
}
</script>

npmスクリプト

package.json
{
  "scripts": {
    "dev": "axios-mock-server -b && nuxt",
    "build": "axios-mock-server -b && nuxt build",
    "start": "axios-mock-server -b && nuxt start",
    "generate": "axios-mock-server -b && nuxt generate"
  }
}

Nuxt.jsを起動

dev コマンドで mocks/$mock.js が作成され、API定義が変わる度にNuxt.jsも更新されます。

$ npm run dev

もっと詳しく

他にもモックサーバーに必要な機能はだいたい揃ってます。
RESTfulな「axios-mock-server」の使い方 - Qiita

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away