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()

最後，如果您已定義任何進度自訂，您可以將它們移至 progresscreateInertiaApp() 協助程式的屬性。

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

如果您使用自訂進度指示器，您可以將 progress 屬性設為 false 來停用預設進度指示器。 progress 屬性設為 false。

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

設定引數

我們已從 createInertiaApp() 中的 setup() 方法中移除先前已棄用的的小寫 app 引數。請改用 App。

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

簡化的 usePage

在 Vue 3 轉接器中，我們簡化了 usePage() Hook，使其不再需要在 component、props、url 和 .value 之後新增 component、props、url 和 version 屬性。

如果您使用 usePage() Hook，請移除所有 .value 的實例。

  import { computed } from 'vue'

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