How does vue read test data in mock

Vue 中读取 Mock 中的 测试数据

在 Vue 项目中使用 Mock 数据进行测试时，可以通过以下步骤读取 Mock 中的数据：

1. 安装 Mock.js

<code>npm install --save-dev mockjs</code>

2. 创建 Mock.js 文件

在 src 目录下创建一个名为 mock.js 的文件，并在其中定义 Mock 数据：

<code class="javascript">const Mock = require('mockjs');

// 定义 Mock 数据
Mock.mock(/api\/users/, {
  'list|10': [{
    id: '@id',
    name: '@cname',
    age: '@integer(18, 60)',
  }]
});</code>

3. 在 Vue 组件中使用 Mock 数据

在需要使用 Mock 数据的 Vue 组件中，引入 Mock.js 文件并使用 $http 服务发起请求：

<code class="javascript">import mock from '@/mock'; // 导入 Mock.js 文件

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    this.$http.get('/api/users').then(response => {
      this.users = response.data;
    });
  },
};</code>

4. 获取 Mock 数据

请求发送后，Vue 组件将收到 Mock.js 生成的响应，响应数据会存储在 this.users 中。

注意：

• Mock.js 文件中的 URL 路径与 Vue 组件中发起的请求 URL 路径必须一致。
• $http 服务是 Vue-resource 插件提供的。如果您未使用 Vue-resource，可以根据您的实际情况使用其他 HTTP 请求库（如 Axios）。

The above is the detailed content of How does vue read test data in mock. For more information, please follow other related articles on the PHP Chinese website!