一、引入依赖
1、安装依赖包
在终端中使用以下命令:
npm install @types/mockjs --save
此处使用了@types进行引入,是因为在.ts文件引用包时,默认必须有类型声明,不能是any。
有很多依赖包是用纯JS写的,没有类型声明。
因此使用@types作为类型声明的集中仓库,对ts项目中引用依赖提供类型说明。
二、模拟数据
1、mock.ts引入并对接口进行数据模拟
使用Mock.mock进行模拟,三个参数分别是接口地址、数据访问方式、模拟的数据。
import Mock from 'mockjs' Mock.mock('/api/list','get',{ "list":[ { id: 1, name: "张三" }, { id: 2, name: "李四" } ], length: 2 })
2、将模拟数据挂载到main.ts
在main.ts文件中引入mock.ts。
// 引入mockjs import './api/mock'
3、在页面进行数据访问并回显
定义响应式数据listData,其内的list属性值用来存储模拟数据。定义getData方法访问接口并接受模拟数据值,页面对数据进行回显。
<script setup lang="ts"> import { onMounted, reactive } from "vue"; import { getList } from "../utils/index"; let listData = reactive({ list: [] }) const getData = () =>{ getList().then(res=>{ listData.list = res.data.list }) } onMounted(()=>{ getData() }) </script> <template> <div style="padding: 20px;" v-for="item in listData.list" :key="item.id"> <span style="color: #ffffff;">id:{{ item.id }}</span> <br /> <span style="color: #ffffff;">name:{{ item.name }}</span> <br /> </div> </template>
结果如下:
标签:Vue,list,ts,js,mock,vue3,mockjs,数据,模拟 From: https://www.cnblogs.com/guobin-/p/17793672.html