v1.0 升级指南

新增功能

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。

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

- import { Inertia } from '@inertiajs/inertia'
+ import { router } from '@inertiajs/vue3'

- import createServer from '@inertiajs/server'
+ import createServer from '@inertiajs/vue3/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 { createInertiaApp } from '@inertiajs/vue3'

- import { usePage } from '@inertiajs/inertia-vue3'
+ import { usePage } from '@inertiajs/vue3'

- import { useForm } from '@inertiajs/inertia-vue3'
+ import { useForm } from '@inertiajs/vue3'

- import { useRemember } from '@inertiajs/inertia-vue3'
+ import { useRemember } from '@inertiajs/vue3'

- import { Head } from '@inertiajs/inertia-vue3'
- import { InertiaHead } from '@inertiajs/inertia-vue3'
+ import { Head } from '@inertiajs/vue3'

- import { Link } from '@inertiajs/inertia-vue3'
- import { link } from '@inertiajs/inertia-vue3'
- import { InertiaLink } from '@inertiajs/inertia-vue3'
+ import { Link } from '@inertiajs/vue3'

进度

以前，进度指示器作为单独的插件 (@inertiajs/progress) 提供。现在默认情况下已安装并启用。

如果您还没有，请删除旧的进度库。

npm remove @inertiajs/progress

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

- import { InertiaProgress } from '@inertiajs/progress'

- InertiaProgress.init()

最后，如果您定义了任何进度自定义项，您可以将它们移至 createInertiaApp() 帮助程序的 progress 属性。

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

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

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

设置参数

我们已从 createInertiaApp() 中的 setup() 方法中删除了以前已弃用的 app 参数。请改用 App。

  createInertiaApp({
    // ...
-   setup({ app, props }) {
+   setup({ App, props }) {
      // ...
    },
  })

简化的 usePage

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

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

  import { computed } from 'vue'

- const appName = computed(() => usePage().props.value.appName)
+ const appName = computed(() => usePage().props.appName)