Vue3 使用axios调用api并呈现api数据

这里调用https://api.apiopen.top/getJoke?page=1&count=10&type=text这个接口数据
将数据展示在页面上，如下：

实现流程：
1.创建工程：npm init vite-app 工程名
2.cd 工程名
3.npm install
4.npm install axios --save
5.npm run dev
6.在工程名>src中新建store文件夹，并在该文件夹中新建index.js，用于存储获取的数据如下：

 index.js：
import {reactive} from "vue";

const store = {
state:reactive({
duanziList:[],
}),
setDzList(list){
this.state.duanziList = list
},
}

export default store;
7.修改App.vue的代码如下：