微信开发工具mock的使用
当接口调不通或者没数据时候,可以造假数据,页面就可以正常写逻辑
vue中使用mock
-
npm i mockjs
-
src目录下新建mock文件夹
-
index.ts
import Mock from 'mockjs'
import { userList } from './data/user'
Mock.setup({
timeout: '50-1000'
})
Mock.mock(/\/userList/, 'get', () => {
return {
code: 0,
data: userList
}
})
- data/user.ts
export const userList = [
{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
},
]
- 组件内使用
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script setup lang='ts'>
import axios from 'axios'
interface User {
id: number,
name: string
}
let list = ref<User[]>([])
onMounted(() => {
axios.get('/userList').then(res => {
console.log(res.data) // {code: 0, data: Array(2)}
list.value = res.data.data
})
})
</script>