使用 Mock 自己產生假資料

使用 Mockjs 和 axios-mock-adapter 在 Nuxt 裡面使用

▍安裝

需先安裝 Axios、axios-mock-adapter、Mockjs

▍資料夾

新增 mock 資料夾，主要放置用 Mockjs 產生得資料。

新增 mock.js 檔案到 plugins 下。

新增完上面資料夾結構後，記得到 nuxt.config.js 中加上使用的 plugins 路徑。

plugins: ['~/plugins/mock.js']

▍程式碼架構

plugins/mock.js

建置可以接收的 API，這裡設置了 params 模仿傳入參數。

import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'
import listData from '~/mock/list'
let mock_adapter = new MockAdapter(axios)
mock_adapter.onGet('/users', { params: { listText: 'jay' } }).reply(config => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve([200, { data: listData }]), 0)
  })
})

mock/list.js

使用 Mockjs 製造假資料。

import Mock from 'mockjs'
export default Mock.mock({
  'list|1-10': [
    {
      'id|+1': 1
    }
  ]
})

使用

用 axios 接收 axios-mock-adapter 所製造出來的 API。

async asyncData({ $axios }) {
  try {
    const { data } = await $axios.$get("http://localhost:3000/users", {
     params: { listText: "jay" }
    });
    return { lists: data.list };
  } catch (err) {
   console.error(err);
  }
}

然後就能在 template 中使用所產生 lists 的資料。