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的代码如下：

<template>
  <h1>段子</h1>
  <div v-for="(item,i) in store.state.duanziList" :key="i">
    <p>{{item.text}}</p>
  </div>
</template>

<script>
import store from './store/index.js'
import axios from 'axios'


export default {
  name: 'App',

  provide:{
    store
  },

  setup(){
    let api = 'https://api.apiopen.top/getJoke?page=1&count=10&type=text';
    // // 方式1
    // fetch(api).then(res=>res.json()).then(result=>{
    //   store.setDzList(result.result)
    //   // console.log(result)
    // })

    // 方式2
    axios.get(api).then((result)=>{
      // console.log(result)
      store.setDzList(result.data.result)
    })
    return {
      store
    }
  }
}
</script>

8.保存代码，查看页面