怎么用axios返回的数据动态显示页面

我写这篇博客是我学完vue2后，自己尝试用写一个vue3的项目，这篇文章就是解决我写项目时遇到的第一个大难题（对我这种初学者来说），不多废话，进入正题。

解决方法直接看后面

---

在vue2的时候，使用axios返回的数据 我是直接通过this挂载到组件实例对象上，然后通过this实例对象拿到挂载的数据动态渲染页面。

beforeMount(){
      axios({
        url: "http://localhost:3200/getTopLists",
        method: "GET",
      }).then((res) => {
        this.$data.topList = res.data.response.data.topList;
      });
  }

<div>
      <div>啦啦啦</div>
      <div>我是买报的小行家</div>
    <span>{{this.$data.topList}}</span>
  </div>

下面是显示结果

但是到了vue3，data什么的配置项全部放到setup配置项中了，setup加载又要比其他生命周期函数都要早，所以在setup中就无法使用，所以就动态加载不了。然后我找了好久，终于找到了一种方法。方法如下

这里我第一次写的时候说要引入vuex的store，来实现，其实并不需要，只要在setup提前声明一个响应式的数据，比如

const data = reactive({

      top_list:[]

    })

然后再通过axios发请求，响应数据后赋值

axios({

      url: "http://localhost:3200/getTopLists",

      method: "get",

    }).then((res) => {

      data.top_list = res.data;

    });

 

 

下面是我第一次的写法

import {reactive} from 'vue'

const store = {
  state:reactive({
    top_list:[]
  })
}
export default store

然后

import store from "@/store/index";

//代码我没有写全，只截取了关键部分

setup(props) {
    axios({
      url: "http://localhost:3200/getTopLists",
      method: "get",
    }).then((res) => {
      store.state.top_list = res.data.response.data.topList;
      console.log(res.data.response.data);
    });
    return {
      ...toRefs(store.state),
    };
  },

<section id="recommend">
    <ul v-if="top_list">
      <li @click="" v-for="(item, index) in top_list" key="index" class="rank_list__item">
        <rankListItem  :data_id="top_list[index]"></rankListItem>
      </li>
    </ul>
  </section>

然后这用就可以达到vue2中达到的效果了。

第一次写博客，写的不好请见谅。如果看了有解决您碰到的问题的话，可以给我点个赞吗。谢谢