Vue.js 中的 Inertia 简单 Axios 请求

在本文中，我们将介绍在 Vue.js 中如何使用 Inertia.js 和 Axios 进行简单的请求。我们将介绍如何设置和使用 Inertia.js、Axios 和 Laravel 后端。

什么是 Vue.js 和 Inertia.js？

Vue.js 是一个用于构建用户界面的开源 JavaScript 框架。它可以帮助开发者通过组件化的方式来构建交互式的应用程序。Vue.js 提供了一系列工具和库，使得我们能够更高效地开发和维护复杂的前端应用。

Inertia.js 是一个基于 Vue.js 的轻量级前端框架，它允许我们使用服务器端的交互式组件来构建现代的单页应用。它的设计理念是将后端和前端的代码完全解耦，使得前端开发和后端开发能够并行进行。Inertia.js 提供了一个适配层，通过该适配层可以将后端应用程序与 Vue.js 前端应用程序连接在一起。

准备工作

在开始使用 Inertia.js 和 Axios 进行请求之前，我们需要进行一些准备工作。

首先，我们需要在 Laravel 后端项目中安装 Inertia.js 插件。通过 Composer 命令行工具执行以下命令安装 Inertia.js：

composer require inertiajs/inertia-laravel

然后，我们需要安装前端的 Vue 相关依赖包。通过 npm 命令行工具执行以下命令安装相关依赖：

npm install @inertiajs/inertia vue@next

接下来，我们需要在 Vue.js 项目的 app.js 文件中进行一些预处理工作。我们可以在文件开头添加以下代码来导入和配置 Inertia.js：

import { createApp, h } from 'vue';
import { App, plugin } from '@inertiajs/inertia-vue3';

const app = createApp({
    render: () =>
        h(App, {
            initialPage: JSON.parse(document.getElementById('app').dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
});

app.mixin({ methods: { route } });
app.use(plugin);
app.mount('#app');

完成这些准备工作后，我们就可以开始使用 Inertia.js 和 Axios 进行请求了。

发送 Inertia 请求

首先，我们需要在 Vue.js 组件中导入 Inertia 和 Axios：

import { Inertia } from '@inertiajs/inertia';
import axios from 'axios';

接下来，我们可以使用 Inertia 的 $inertia 函数发送请求。例如，我们可以在 Vue 组件的方法中使用以下代码发送 GET 请求：

methods: {
    fetchData() {
        this.$inertia.get('/api/data').then((response) => {
            const data = response.data;
            // 处理返回的数据
        });
    },
}

我们也可以发送 POST 请求，只需要将 $inertia.get 替换为 $inertia.post 即可：

methods: {
    submitForm() {
        const formData = {
            // 表单数据
        };

        this.$inertia.post('/api/submit', formData).then((response) => {
            // 处理返回的数据
        });
    },
}

在这些请求中，我们可以使用 Axios 的各种配置项，例如设置请求头、传递参数等。

处理 Inertia 响应

当我们发送 Inertia 请求后，后端会返回一个 Inertia 响应。我们可以通过 .then 方法来处理这个响应并更新页面数据。

例如，我们可以在一个 Vue 组件的方法中处理 GET 请求的响应：

methods: {
    fetchData() {
        this.$inertia.get('/api/data').then((response) => {
            const data = response.data;
            // 处理返回的数据
            this.myData = data;
        });
    },
}

在这个例子中，我们将返回的数据保存到 myData 变量中，然后可以在组件中使用这个变量来更新页面。

示例：获取数据并渲染到页面

让我们通过一个简单的例子来展示如何使用 Inertia 和 Axios 请求数据并将其渲染到页面上。

首先，我们创建一个 Vue 组件 DataDisplay.vue，该组件将显示从后端获取的数据：

<template>
    <div>
        <h1>Data Display</h1>
        <ul>
            <li v-for="item in data" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [],
        };
    },
    mounted() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            this.$inertia.get('/api/data').then((response) => {
                const data = response.data;
                this.data = data;
            });
        },
    },
};
</script>

然后，我们创建一个包含 <inertia></inertia> 标签的主页面，用来加载 Vue.js 组件和接收 Inertia 响应：

<!DOCTYPE html>
<html>
    <head>
        <!-- 页面头部代码 -->
    </head>
    <body>
        <div id="app">
            <inertia></inertia>
        </div>

        <script src="{{ mix('/js/app.js') }}"></script>
    </body>
</html>

最后，我们需要在 Laravel 后端创建一个路由和控制器方法来处理 /api/data 请求：

// 路由定义
Route::get('/api/data', [DataController::class, 'getData']);

// 控制器方法
public function getData()
{
     $data = [ ['id' => 1, 'name' => 'John'], ['id' => 2, 'name' => 'Jane'], ['id' => 3, 'name' => 'Mike'], ]; return response()->json($ data);
}

这样，当我们访问主页面时，Vue.js 组件将发送 GET 请求到 /api/data，获取数据并将其显示在页面上。