关于nuxt.js:nuxt-mock-axios-创建随机数据

这里简略介绍一下，nuxt 下 mock + axios 的装置、应用。

mock 可能生成随机数据，拦挡 Ajax 申请。对于纯前端来说，mock 配合 express，就能够本人搭建后盾了。
也能够参考一下 vue-element-admin 对于 mock 的应用，以及一些大佬踩过的坑。

mock

1，装置

npm install mockjs

2，增加 mock 代码

// plugins/mock.js
import Mock from "mockjs"

Mock.mock(/user\.json/, {
  "list|1-10": [
    {
      "id|+1": 1,
      email: "@EMAIL",
    },
  ],
})

3，nuxt.config.js 配置

 plugins: ['@/plugins/mock'],

4，mock 数据调用

  methods: {async getTempGameList() {const mockData = await this.$axios.$get("user.json")
    console.log("mockData", mockData)
    },
}

数据后果：

留神：mock 的申请数据无奈在 nuxt 提供的 asyncData 里调用。这里是在 methods 里调用的。

@nuxtjs/axios

对于 @nuxtjs/axios 的装置，详见之前的文章：nuxt—axios 封装 + 环境变量配置

在获取数据的时候呈现如下问题：

TypeError: request.upload.addEventListener is not a function

网上说：导致这一问题的根本原因是 Mockjs 中, 封装了原生的 XMLHttpRequest 为 MockXMLHttpRequest.
解决思路是, 把原生 XMLHttpRequest 的 upload 属性赋给 MockXMLHttpRequest 的原型对象. 在 node_modules/mockjs/dist/mock.js 退出以下代码

MockXMLHttpRequest .prototype.upload = createNativeXMLHttpRequest().upload

参考链接：Axios + mockjs: request.upload.addEventListener is not a function 的起因和解决办法

以上就是 nuxt + mock + axios 的根本用法。其中，mock 的应用，还须要多看官网文档。

参考案例：mock 随机生成中文名