Vue.js 组件中使用 Axios 获取数据：全面的指南

2024-03-17 11:13:15

在 Vue.js 组件中使用 Axios 获取数据

简介

在 Vue.js 组件中获取数据是构建动态和交互式应用程序的关键。通过使用流行的 axios 库，我们可以轻松地从服务器获取数据。

步骤

1. 在组件中设置数据

在组件的 mounted() 生命周期钩子中，我们使用 axios 发起 GET 请求：

mounted() {
  axios
    .get("/news/all")
    .then((response) => (this.articles = response.data));
}

这将把响应数据分配给 articles 数据属性。

2. 在模板中使用数据

为了在模板中使用组件数据，我们可以使用插值表达式。然而，直接渲染原始对象会导致渲染问题。

3. 使用自定义组件

为了正确渲染数据，我们可以创建一个自定义组件，例如 <Article>：

<template>
  <div class="article-list">
    <article v-for="article in articles" :key="article.article_id">
      <h1>{{ article.article_id }}</h1>
      <h2>{{ article.post_time }}</h2>
      <p>{{ article.article_content }}</p>
    </article>
  </div>
</template>

import { defineComponent } from "vue";

export default defineComponent({
  props: ["articles"],
});

4. 在父组件中使用自定义组件

在父组件的模板中，我们使用 <Article> 组件：

<template>
  <div class="content">
    <h1 class="center">Nyheter</h1>
    <div class="news-content">
      <Article :articles="articles" />
    </div>
  </div>
</template>