如何在 vue 中渲染 api 数据？通过 axios 获取 api 数据。将数据存储在 vuex store 中（可选）。在组件中通过 v-for 循环或插值渲染数据。使用 try...catch 块处理数据获取错误。

如何在 Vue 中渲染 API 数据

在 Vue 应用中渲染 API 数据是一个常见任务。以下是完成此任务的步骤：

使用 axios 获取数据

axios 是一个 流行 的 JavaScript 库，用于向服务器发送 HTTP 请求。您可以使用它从 API 获取数据，如下所示：

立即学习“前端免费学习笔记（深入）”；

import axios from 'axios';

const { data } = await axios.get('https://example.com/api/data');

将数据存储在 Vuex Store 中（可选）

如果您计划在多个组件中使用 API 数据，将数据存储在 Vuex Store 中是明智的。 Vuex 是一种状态管理库，它使您可以以响应式的方式管理应用程序状态。

import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    apiData: []
  },
  getters: {
    getApiData: state => state.apiData
  },
  mutations: {
    setApiData: (state, data) => state.apiData = data
  }
});

在组件中渲染数据

要渲染数据，您可以在组件模板中使用以下方法之一：

• v-for 循环：如果您要渲染数组中的多个对象，可以使用 v-for 循环，如下所示：

• {{ item.name }}

• 插值：如果您要渲染单个对象，可以使用插值，如下所示：

<div>{{ apiData.name }}</div>

处理错误

在获取 API 数据时可能会发生错误。您可以通过在 try...catch 块中捕获错误并处理它们来处理错误，如下所示：

try {
  const { data } = await axios.get('https://example.com/api/data');
  store.commit('setApiData', data);
} catch(error) {
  console.error(error);
}

以上就是vue怎么渲染接口的详细内容，更多请关注php中文网其它相关文章！