升级指南

Inertia.js v1.0 已经发布！🥳

新特性

此版本的重点是简化项目的整体架构，以使 Inertia 更易于维护和使用。

它包含一些破坏性变更，主要涉及包名称和更新的导出名称。本指南将解释如何将您的项目升级到 v1.0。

有关所有更改的完整列表，请参阅发布说明。

新依赖项

在之前的 Inertia 版本中，您需要安装多个库，包括核心库 (@inertiajs/inertia)、您选择的适配器 (@inertiajs/inertia-vue|vue3|react|svelte)、进度库 (@inertiajs/progress) 以及如果您使用服务器端渲染，还需要安装服务器库 (@inertiajs/server)。

现在，您只需要安装一个库，即您选择的适配器（Vue、React 或 Svelte），所有其他核心库将自动安装。

首先，删除所有旧的 Inertia 库。

npm remove @inertiajs/inertia @inertiajs/inertia-vue3 @inertiajs/progress @inertiajs/server

然后，安装您选择的新 Inertia 适配器。新适配器库已更名，不再包含 inertia-。

npm install @inertiajs/vue3

重命名的导入

接下来，更新项目中所有与 Inertia 相关的导入，使用新适配器库的名称。现在，所有导入都可以从适配器库中使用，这意味着您不再需要从 Inertia 核心库、进度库或服务器库导入任何内容。

此外，一些导出已被重命名，之前已弃用的导出已被删除。例如，Inertia 导出已重命名为 router。

以下是所有导入更改的完整列表：

# Vue 2
- import { Inertia } from '@inertiajs/inertia'
- import createServer from '@inertiajs/server'
- import { createInertiaApp } from '@inertiajs/inertia-vue3'
- import { App } from '@inertiajs/inertia-vue3'
- import { app } from '@inertiajs/inertia-vue3'
- import { plugin } from '@inertiajs/inertia-vue3'
- import { InertiaApp } from '@inertiajs/inertia-vue3'
- import { usePage } from '@inertiajs/inertia-vue3'
- import { useForm } from '@inertiajs/inertia-vue3'
- import { useRemember } from '@inertiajs/inertia-vue3'
- import { Head } from '@inertiajs/inertia-vue3'
- import { InertiaHead } from '@inertiajs/inertia-vue3'
- import { Link } from '@inertiajs/inertia-vue3'

# Vue 3
+ import { router } from '@inertiajs/vue3'
+ import createServer from '@inertiajs/vue3/server'
+ import { createInertiaApp } from '@inertiajs/vue3'
+ import { App } from '@inertiajs/vue3'
+ import { usePage } from '@inertiajs/vue3'
+ import { useForm } from '@inertiajs/vue3'
+ import { useRemember } from '@inertiajs/vue3'
+ import { Head } from '@inertiajs/vue3'
+ import { Link } from '@inertiajs/vue3'

注意： 不再可能使用 App 导出手动配置 Inertia。相反，您应该使用 createInertiaApp() 辅助函数。有关更多信息，请参阅客户端设置文档。

进度条

之前，进度指示器作为单独的插件可用（@inertiajs/progress）。现在，默认情况下已安装并启用进度指示器。

如果尚未删除旧的进度库，请执行以下操作：

npm remove @inertiajs/progress

然后，删除 InertiaProgress 导入和 InertiaProgress.init() 调用，因为它们不再需要。

最后，如果您定义了任何自定义进度设置，可以将它们移动到 createInertiaApp() 辅助函数的 progress 属性中。

createInertiaApp({
  progress: {
    color: '#29d',
  },
  // ...
})

如果您使用自定义进度指示器，可以通过将 progress 属性设置为 false 来禁用默认的进度指示器。

createInertiaApp({
  progress: false,
  // ...
})

Setup 方法的参数

我们已经从 createInertiaApp() 的 setup() 方法中删除了以前已弃用的小写 app 参数。现在，请使用 App。

createInertiaApp({
  // ...
  setup({ App, props }) {
    // ...
  },
})

简化的 usePage

在 Vue 3 适配器中，我们简化了 usePage() hook，不再需要在 component、props、url 和 version 属性后添加 .value。

如果您使用 usePage() hook，请删除所有 .value 的实例。

import { computed } from 'vue'

// 旧的方式
const appName = computed(() => usePage().props.value.appName)

// 新的方式
const appName = computed(() => usePage().props.appName)