Axios请求使用Reactive集成V-for获取存储数据

Vue 3与axios的完美结合：打造高效的数据获取与更新机制 在当今的Web开发中，Vue.js和axios的结合已经成为了一种高效获取和更新数据的方式。Vue 3作为Vue的最新版本，提供了许多新的功能，如setup函数和reactive对象，使得我们能够更轻松地管理和更新组件的状态。而axios，作为一个流行的HTTP客户端库，可以方便地发送HTTP请求并获取数据。 本文将通过一个简单的Vue 3组件示例来介绍如何使用axios来调用接口获取数据，并使用Vue 3的reactive对象和toRefs函数来管理和更新数据。 一、首先，我们需要安装axios： bash 复制 npm install axios 二、然后，在Vue 3组件中导入axios、reactive和toRefs： javascript 复制 import axios from 'axios'; import { reactive, toRefs } from 'vue'; 三、创建一个Vue 3组件，并定义setup函数： javascript 复制 export default { setup() { const state = reactive({ data: [], });

const fetchData = async () => {
  try {
    const response = await axios.get('http://localhost:9999/liningbo');
    console.warn(response.data);  // 打印获取到的数据
    state.data = response.data;  // 将获取到的数据更新到组件的状态中
  } catch (error) {
    console.error('Failed to fetch data:', error);  // 捕获并打印错误信息
  }
};

return {
  fetchData,  // 返回异步函数以便在模板或其他地方调用
  ...toRefs(state),  // 使用toRefs将reactive对象转换为普通的JavaScript对象，以便在模板中使用data属性访问数据
};

}, }; 四、在模板中调用异步函数并显示数据： 在模板中，我们可以调用fetchData函数来获取数据，并通过v-for指令遍历数组来显示数据。例如： html 复制 文章让人工智能写的我懒得写文章，全部代码参考下面

axios调用接口：import axios from 'axios'; import { reactive,toRefs } from 'vue'; export default { setup() { const state = reactive({ data: [], }); const ccb = async () => { const response = await axios.get('http://localhost:9999/liningbo'); console.warn(response.data) state.data = response.data }; return { ccb, ...toRefs(state) }; }, };