Hướng dẫn nâng cấp lên v1.0

Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo tài liệu v3.

Bạn có thể xem tài liệu cũ của Inertia.js v0.11 tại legacy.inertiajs.com.

Có gì mới

Inertia.js v1.0 tập trung đơn giản hóa kiến trúc tổng thể của dự án với mục tiêu giúp Inertia dễ bảo trì và dễ sử dụng hơn. Phiên bản này bao gồm một số breaking change, chủ yếu liên quan đến tên package và các named export được cập nhật. Hướng dẫn này giải thích cách nâng cấp dự án lên v1.0. Để xem danh sách đầy đủ mọi thay đổi, hãy đọc release note.

Dependency mới

Ở các bản Inertia trước đây, bạn phải cài nhiều thư viện, bao gồm thư viện core (@inertiajs/inertia), adapter lựa chọn (@inertiajs/inertia-vue|vue3|react|svelte), thư viện progress (@inertiajs/progress) và nếu dùng server-side rendering thì cả thư viện server (@inertiajs/server). Từ phiên bản này, bạn chỉ cần cài một thư viện duy nhất — adapter bạn lựa chọn (Vue, React hoặc Svelte); mọi thư viện core còn lại sẽ được cài tự động. Để bắt đầu, hãy gỡ tất cả thư viện Inertia cũ.

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

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

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

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

Tiếp theo, cài adapter Inertia mới mà bạn muốn dùng. Các thư viện adapter mới đã được đổi tên và không còn chứa inertia- trong tên package.

npm install @inertiajs/vue2

npm install @inertiajs/vue3

npm install @inertiajs/react

npm install @inertiajs/svelte

Import được đổi tên

Tiếp theo, cập nhật toàn bộ import liên quan đến Inertia trong dự án để dùng tên thư viện adapter mới. Mọi import hiện đều có sẵn từ thư viện adapter, nghĩa là bạn không còn import gì trực tiếp từ thư viện core Inertia, thư viện progress hay thư viện server. Ngoài ra, một số export đã được đổi tên và các export từng bị deprecated đã bị loại bỏ. Ví dụ, export Inertia được đổi tên thành router. Dưới đây là danh sách đầy đủ các thay đổi về import:

import { Inertia } from '@inertiajs/inertia'
import { router } from '@inertiajs/vue2'

import createServer from '@inertiajs/server'
import createServer from '@inertiajs/vue2/server'

import { createInertiaApp } from '@inertiajs/inertia-vue'
import { App } from '@inertiajs/inertia-vue'
import { app } from '@inertiajs/inertia-vue'
import { InertiaApp } from '@inertiajs/inertia-vue'
import { plugin } from '@inertiajs/inertia-vue'
import { createInertiaApp } from '@inertiajs/vue2'

import { Head } from '@inertiajs/inertia-vue'
import { InertiaHead } from '@inertiajs/inertia-vue'
import { Head } from '@inertiajs/vue2'

import { Link } from '@inertiajs/inertia-vue'
import { link } from '@inertiajs/inertia-vue'
import { InertiaLink } from '@inertiajs/inertia-vue'
import { Link } from '@inertiajs/vue2'

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'

import { Inertia } from '@inertiajs/inertia'
import { router } from '@inertiajs/react'

import createServer from '@inertiajs/server'
import createServer from '@inertiajs/react/server'

import { createInertiaApp } from '@inertiajs/inertia-react'
import { App } from '@inertiajs/inertia-react'
import { app } from '@inertiajs/inertia-react'
import { InertiaApp } from '@inertiajs/inertia-react'
import { createInertiaApp } from '@inertiajs/react'

import { usePage } from '@inertiajs/inertia-react'
import { usePage } from '@inertiajs/react'

import { useForm } from '@inertiajs/inertia-react'
import { useForm } from '@inertiajs/react'

import { useRemember } from '@inertiajs/inertia-react'
import { useRememberedState } from '@inertiajs/inertia-react'
import { useRemember } from '@inertiajs/react'

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

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

import { Inertia } from '@inertiajs/inertia'
import { router } from '@inertiajs/svelte'

import { createInertiaApp } from '@inertiajs/inertia-svelte'
import { App } from '@inertiajs/inertia-svelte'
import { app } from '@inertiajs/inertia-svelte'
import { InertiaApp } from '@inertiajs/inertia-svelte'
import { createInertiaApp } from '@inertiajs/svelte'

import { page } from '@inertiajs/inertia-svelte'
import { page } from '@inertiajs/svelte'

import { inertia } from '@inertiajs/inertia-svelte'
import { inertia } from '@inertiajs/svelte'

import { useForm } from '@inertiajs/inertia-svelte'
import { useForm } from '@inertiajs/svelte'

import { useRemember } from '@inertiajs/inertia-svelte'
import { remember } from '@inertiajs/inertia-svelte'
import { remember } from '@inertiajs/svelte'

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

Không còn có thể cấu hình Inertia thủ công bằng export App. Thay vào đó, bạn nên dùng helper createInertiaApp(). Xem tài liệu thiết lập phía client để biết thêm thông tin.

Progress

Trước đây, progress indicator có dưới dạng plugin riêng (@inertiajs/progress). Hiện nó được cài và bật mặc định. Nếu chưa thực hiện, hãy gỡ thư viện progress cũ.

npm remove @inertiajs/progress

npm remove @inertiajs/progress

npm remove @inertiajs/progress

npm remove @inertiajs/progress

Tiếp theo, bỏ import InertiaProgress và lời gọi InertiaProgress.init() vì chúng không còn cần thiết.

import { InertiaProgress } from '@inertiajs/progress'
InertiaProgress.init()

Cuối cùng, nếu đã có tùy chỉnh progress, bạn có thể chuyển chúng sang property progress của helper createInertiaApp().

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

Nếu dùng progress indicator tùy chỉnh, bạn có thể tắt progress indicator mặc định bằng cách đặt property progress thành false.

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

Đối số setup

Chúng tôi đã loại bỏ đối số chữ thường app từng bị deprecated trong phương thức setup() của createInertiaApp(). Hãy dùng App thay thế.

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

usePage đơn giản hơn

Trong adapter Vue 3, hook usePage() đã được đơn giản hóa để không còn yêu cầu thêm .value sau các property component, props, url và version. Nếu đang dùng hook usePage(), hãy xóa toàn bộ .value tương ứng.

import { computed } from 'vue'
const appName = computed(() => usePage().props.value.appName) 
const appName = computed(() => usePage().props.appName) 

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v1 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Nâng cao

Có gì mới

Dependency mới

Import được đổi tên

Progress

Đối số setup

usePage đơn giản hơn

Tài liệu chính thức

​Có gì mới

​Dependency mới

​Import được đổi tên

​Progress

​Đối số setup

​usePage đơn giản hơn

​Tài liệu chính thức

Có gì mới

Dependency mới

Import được đổi tên

Progress

Đối số setup

usePage đơn giản hơn

Tài liệu chính thức