写一段vue代码,vue3中如何调用mock中模拟的接口获取数据
时间: 2023-05-23 10:02:54 浏览: 420
vue-cli3使用mock数据的方法分析
当使用 Vue.js 后端渲染时,可以直接在模板中调用接口。在 Vue.js 中实现数据获取可以通过 Axios 库实现,Mock 数据在Vue中可以用以下方法实现:
```javascript
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
const mockAxios = new MockAdapter(axios);
mockAxios.onGet('/api/data').reply(200, {
data: 'mock data'
})
export default {
data() {
return {
data: ''
}
},
mounted() {
axios.get('/api/data').then(resp => this.data = resp.data.data)
}
}
```
这样就可以在组件中通过 this.data 调用 mock 的数据。
阅读全文