带有 Laravel 的 Inertia 中的 Vue 组件似乎加载了两次

Question

使用 Inertia 和 Vue 新创建的 Laravel 项目，我有一个错误，它在我的 vue 组件中运行代码两次。

对于一个简单的测试演示，我有一个Test.vue，用这个代码

<template>
<div>
    TEST
</div>
</template>

<script>
export default {
    name: "Test",
    mounted() {
        console.log('test')
    }
}
</script>

<style scoped>

</style>

web.php中的路线：

Route::get('/test', array(App\Http\Controllers\DashboardController::class, 'test'));

在控制器中：

    public function test(): Response
    {
        return Inertia::render('Test');
    }

当我转到路径 /test 时，它会在我的控制台上挂载两次 'test'。在调用 API 等的更高级组件中，也会调用它们两次。

我怀疑我的项目可能在 app.blade.php or app.js 中设置错误，但无法弄清楚。

我按照 https://inertiajs.com/server-side-setup and https://inertiajs.com/client-side-setup 上的指南进行了设置。

我的源代码在这里：https://github.com/ekstremedia/laravel-inertia

编辑：在我加载的第一个组件中似乎只回显了两次。如果我在那个组件 link 到另一个组件，然后去那里，它不会加载两次。

Answer 1

我发现这可以通过修改资源目录中的 app.js 文件来解决：

import Vue from 'vue'
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue'


Vue.use(InertiaPlugin)

new Vue({
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

您的问题似乎出在您初始化惯性应用程序的方式上。

带有 Laravel 的 Inertia 中的 Vue 组件似乎加载了两次

Vue components in Inertia with Laravel seems to load twice

inertiajs

laravel

vue.js