如何使用 Vue 3 和 Composition API 创建报告应用程序？-猿码集

介绍

Vue 3 是一个流行的 Web 前端框架，它支持多种 API，Composition API 就是其中之一。在这篇文章中，我将向你展示如何使用 Vue 3 和 Composition API 创建一个实用的报告应用程序。我们将会一步一步地讲解如何配置、如何建立组件、如何编写逻辑以及如何引用数据等问题。

第一步：创建一个新项目

在开始我们的代码之前，我们需要安装 Vue 3、Vue CLI 和 Vue Router。你可以按照 Vue 官方文档中的说明进行安装。

完成安装后，我们需要在终端中执行以下命令来创建一个新项目：

vue create report-app

这个命令将会创建一个新的 Vue 3 项目，之后你可以在报告应用程序的目录中运行以下命令以启动开发服务器：

npm run serve

第二步：创建一个组件

现在我们已经准备好了项目，我们可以开始创建一个组件。这个组件将会控制整个应用程序的共享状态，并且为用户提供数据输入的能力。

1. 在 src/components 目录下创建一个新文件 Report.vue

// Report.vue
<template>
  <div class="report">
    <h2>Report App</h2>
    <form @submit.prevent="sendReport">
      <label>
        Title: <input v-model="title" required>
      </label>
      <label>
        Description: <textarea v-model="description" required></textarea>
      </label>
      <button>Send Report</button>
    </form>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const title = ref('');
    const description = ref('');
    const sendReport = () => {
      console.log(title.value, description.value);
      title.value = '';
      description.value = '';
    };
    return {
      title,
      description,
      sendReport
    };
  }
};
</script>
<style scoped>
.report {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 50%;
}
form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

2. 引用 Report 组件

现在我们已经创建了 Report 组件，我们需要在 App.vue 中引用它。

在 App.vue 的模板中加入以下代码：

<template>
  <div>
    <Report />
  </div>
</template>
<script>
import Report from './components/Report.vue';
export default {
  components: {
    Report
  }
};
</script>

第三步：创建一个数据服务

我们需要一种方式来存储和检索报告数据。在这篇文章中，我们将使用 Axios HTTP 库来读取和写入数据。我们将使用 JSONPlaceholder, 一个虚拟 API 提供的演示数据。

1. 安装 Axios

在命令行中输入以下命令，安装 Axios：

npm i axios

2. 创建一个 DataService 模块

在 src 目录下创建一个新文件 data-service.js，它将会被用于读取和写入数据。

// data-service.js
import axios from 'axios';
const BASE_URL = 'https://jsonplaceholder.typicode.com';
export const getData = async (resource) => {
  const response = await axios.get(`${BASE_URL}/${resource}`);
  return response.data;
};
export const postData = async (resource, data) => {
  const response = await axios.post(`${BASE_URL}/${resource}`, data);
  return response.data;
};

第四步：在 Report 组件中读取和写入数据

现在我们已经准备好了 DataService，我们可以在 Report 组件中使用它来读取和写入数据。

1. 改写 sendReport 函数

现在我们需要改写 sendReport 函数来实际上将数据提交到我们的后台服务。

const sendReport = async () => {
  const data = {
    title: title.value,
    description: description.value
  };
  const response = await postData('posts', data);
  console.log(response);
  title.value = '';
  description.value = '';
};

2. 从后端读取数据

我们可以在 Setup 函数中使用 async 和 await 来读取数据。

import { reactive, onMounted } from 'vue';
import { getData } from '../data-service';
export default {
  setup() {
    const state = reactive({
      loading: true,
      error: null,
      reports: []
    });
    const fetchData = async () => {
      try {
        state.loading = true;
        state.reports = await getData('posts');
      } catch (error) {
        state.error = error;
      } finally {
        state.loading = false;
      }
    };
    onMounted(() => {
      fetchData();
    });
    return {
      ...toRefs(state)
    };
  }
};

第五步：添加 Vue Router

现在我们已经能够读取和写入数据了，我们需要一种方法来呈现数据。我们将使用 Vue Router 来分配 URL 和组件。

1. 安装 Vue Router

在命令行中输入以下命令来安装 Vue Router：

npm install vue-router

2. 配置路由

在 src 目录下创建一个新文件 router.js，并添加以下代码：

import { createRouter, createWebHistory } from 'vue-router';
import Report from './components/Report.vue';
import ReportList from './components/ReportList.vue';
const routes = [
  {
    path: '/',
    name: 'ReportList',
    component: ReportList
  },
  {
    path: '/report',
    name: 'Report',
    component: Report
  }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

3. 注册路由

接下来在 main.js 中注册路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App)
  .use(router)
  .mount('#app');

第六步：创建一个子组件

现在，我们已经为我们的报告应用程序创建了路由，我们需要为 ReportList 组件创建一个子组件。

1. 在 src/components 目录下创建一个新文件 ReportListItem.vue

// ReportListItem.vue
<template>
  <div>
    <h3>{{ report.title }}</h3>
    <div>{{ report.description }}</div>
  </div>
</template>
<script>
export default {
  props: {
    report: {
      type: Object,
      required: true
    }
  }
};
</script>

2. 在 src/components 目录下创建一个新文件 ReportList.vue

现在我们为余下 ReportList 组件创建新的子组件，该组件将呈现所有已提交的报告。

// ReportList.vue
<template>
  <div>
    <h2>Reports</h2>
    <p v-if="loading">Loading...</p>
    <p v-if="error">An error occurred: {{ error }}</p>
    <div v-else>
      <ul>
        <li v-for="report in reports" :key="report.id">
          <ReportListItem :report="report" />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { reactive, onMounted } from 'vue';
import { getData } from '../data-service';
import ReportListItem from './ReportListItem.vue';
export default {
  components: {
    ReportListItem
  },
  setup() {
    const state = reactive({
      loading: true,
      error: null,
      reports: []
    });
    const fetchData = async () => {
      try {
        state.loading = true;
        state.reports = await getData('posts');
      } catch (error) {
        state.error = error;
      } finally {
        state.loading = false;
      }
    };
    onMounted(() => {
      fetchData();
    });
    return {
      ...state
    };
  }
};
</script>

结论

在本文中，我们讲解了如何使用 Vue 3 和 Composition API 创建一个实用的报告应用程序。我们已经创建了一个组件来控制状态，使用了 Axios 来读取和写入数据，使用了 Vue Router 来分配 URL 和组件，并创建了一个子组件以呈现所有已提交的报告。如果我们继续优化该应用程序，我们将可以添加更多功能和组件。

如何使用 Vue 3 和 Composition API 创建报告应用程序？

介绍