Vue——vue3中mockjs模拟获取数据

mockjs官网：http://mockjs.com/

mockjs安装

cnpm install mockjs --save

1、配置

src\mock\index.js 配置文件

import Mock from 'mockjs'

// 设置一下模拟返回数据时间
Mock.setup({
    timeout: '200-600'
})

// 方式一:无参数
Mock.mock(
    "/user/userinfo",
    'get',
    (req) => {
        console.log(req);
        return {
            username: '名字',
            type: '类型'
        }
    }
)

// 方式二:有参数
Mock.mock(
    /\/account.*/,
    'get',
    (req) => {
        console.log(req);
        return {
            username: 'abc',
            type: '123'
        }
    }
)

2、引入

main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

// 如果不想用mock测试就把这行代码注释掉
import './mock/index.js'

createApp(App).mount('#app')

3、使用

App.vue文件

<script>
import store from './store/index.js'
import axios from 'axios'
export default {
  name: 'App',
  components: {
  },
  setup () {
    let api = '/user/userinfo'
    // 方法一
    axios.get(api).then(res => {
      console.log(res, '返回数据 ')
      store.setList(res.data)
    })


    axios.get('/account?username=abc&password=123456').then(res => {
      console.log(res, '返回数据 ')
    })
  }
}
</script>