Vue3中Mock数据的简单方案

因为Vue3项目开发中需要用到Mock数据，所以这里记录一种快速Mock数据的方法。

一、安装

首先，你需要安装 axios 和 axios-mock-adapter。

npm install axios axios-mock-adapter --save

二、编写mock数据

为了保证项目的整洁，我们在项目根目录下的src目录下新建一个名为mock的文件夹。然后依次进行如下步骤：

（1）在mock文件夹下新建index.js文件，文件内容如下：

import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'

// 创建一个 MockAdapter 实例
let mock = new MockAdapter(axios)

const initMock = () => {
  // mock模拟一个get方法的响应数据
  mock.onGet('/users').reply(200, { // 200 为状态码，后面对象为返回data
    users: [
      { id: 1, name: '李华' }
    ]
  })
  // mock模拟一个post方法的响应数据
  mock.onPost('/foo').reply(200, { // 200 为状态码，后面对象为返回data
    msg: 'success',
    desc: "恭喜，请求成功！"
  })

  // 模拟一个带参数请求的响应
  mock.onGet("/search", { params: { searchText: "张" } }).reply(200, {
    users: [{ id: 1, name: "张小花" }],
  });

  // 模拟一个错误响应
  mock.onPut('/api/users/1').networkError();

}

// 导出
export default initMock

（2）在main.js中引入使用，在main.js中加入如下代码：

// 导入mock数据
import initMock from './mock/index';
// 初始化mock数据函数方法
initMock()

三、使用mock数据

以下是使用mock数据的方法的vue页面代码，Mock.vue示例页面：

<template>
    <div>
        <div><b>axios-mock-adapter</b>数据模拟js库，请注意浏览器控制台输出</div>

        <button @click="funGetTest">get请求测试</button>
        <button @click="funParamsTest">get带参数请求测试</button>
        <button @click="funPostTest">post请求测试</button>
        <button @click="funPutTest">put请求测试(错误响应示例)</button>
    </div>
</template>

<script setup>
//引入axios
import axios from 'axios';

const funGetTest = () => {
    axios.get("/users").then((res) => {
        console.log("GET请求结果：", res);
    });
}

const funParamsTest = () => {
    axios.get("/search", {
        params: { searchText: "张" }
    }).then(res => {
        console.log("GET带参数请求结果：", res);
    });
}

const funPostTest = () => {
    axios.post("/foo").then(res => {
        console.log("POST请求结果：", res);
    });
}

const funPutTest = () => {
    axios.put("/api/users/1").then(res => {
        console.log("PUT请求结果：", res);
    });
}

</script>

<style scoped>
button {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}

button:hover {
    background-color: #3496eb;
    color: #ffffff;
}
</style>

上述方法示例展示了如何使用 axios-mock-adapter 来模拟不同的 HTTP 请求和响应，让你能够测试你的应用在各种情况下的行为，而不需要实际发送网络请求。