在 Vue3 中实现基于路由的模型 (Inertia.js)
Implementing route based models in Vue3 (Inertia.js)
我正在按照本指南进行操作,该指南展示了如何在 Inertia.js.
中启用“Route Based Modals”
post 是为 Vue2 编写的,我使用的是 Vue3 - 我在使用它时遇到了一些问题。
这是我的“useModal”方法的“可组合”:
//Composables/useModal.js
const useModal = {
computed: {
modalComponent() {
return this.$page.props.modal
? () => import(`@/Pages/${this.$page.props.modal}`)
: false
}
}
}
export { useModal }
然后我在我的 app.js
文件中声明如下:
//app.js
//...
import {useModal} from "@/Composables/useModal";
createInertiaApp({
title: (title) => `${title}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component("Link", Link)
.mixin(useModal)
.mixin({ methods: { route } })
.mount(el);
},
});
在我的主布局中,名为 AppLayout
我已经声明了 Component
:
<body>
<!-- Main elements are here, removed for clarity -->
<Component
v-bind="$page.props"
v-if="$root.modalComponent"
:is="$root.modalComponent"
/>
</body>
此外,我在 AppServiceProvider
:
中声明了 modal()
方法
public function boot()
{
ResponseFactory::macro('modal', function ($modal) {
inertia()->share(['modal' => $modal]);
});
}
现在,我正尝试在模态中呈现 Vue 组件,如下所示:
//FileController.php
public function show(File $file){
\inertia()->modal('File/Show');
return $this->index($file);
}
链接到模态组件时,发出以下警告:
[Vue warn]: Invalid VNode type: undefined (undefined)
at <Anonymous key=0 ...
我最终使用 defineAsyncComponent
解决了这个问题:
//Composables/useModal.js
import {defineAsyncComponent} from "vue";
const useModal = {
computed: {
modalComponent() {
return this.$page.props.modal
? defineAsyncComponent(() => import(`@/Pages/${this.$page.props.modal}`))
: false
}
}
}
export { useModal }
我正在按照本指南进行操作,该指南展示了如何在 Inertia.js.
中启用“Route Based Modals”post 是为 Vue2 编写的,我使用的是 Vue3 - 我在使用它时遇到了一些问题。
这是我的“useModal”方法的“可组合”:
//Composables/useModal.js
const useModal = {
computed: {
modalComponent() {
return this.$page.props.modal
? () => import(`@/Pages/${this.$page.props.modal}`)
: false
}
}
}
export { useModal }
然后我在我的 app.js
文件中声明如下:
//app.js
//...
import {useModal} from "@/Composables/useModal";
createInertiaApp({
title: (title) => `${title}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component("Link", Link)
.mixin(useModal)
.mixin({ methods: { route } })
.mount(el);
},
});
在我的主布局中,名为 AppLayout
我已经声明了 Component
:
<body>
<!-- Main elements are here, removed for clarity -->
<Component
v-bind="$page.props"
v-if="$root.modalComponent"
:is="$root.modalComponent"
/>
</body>
此外,我在 AppServiceProvider
:
modal()
方法
public function boot()
{
ResponseFactory::macro('modal', function ($modal) {
inertia()->share(['modal' => $modal]);
});
}
现在,我正尝试在模态中呈现 Vue 组件,如下所示:
//FileController.php
public function show(File $file){
\inertia()->modal('File/Show');
return $this->index($file);
}
链接到模态组件时,发出以下警告:
[Vue warn]: Invalid VNode type: undefined (undefined) at <Anonymous key=0 ...
我最终使用 defineAsyncComponent
解决了这个问题:
//Composables/useModal.js
import {defineAsyncComponent} from "vue";
const useModal = {
computed: {
modalComponent() {
return this.$page.props.modal
? defineAsyncComponent(() => import(`@/Pages/${this.$page.props.modal}`))
: false
}
}
}
export { useModal }