关于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 随机生成中文名