外掛和中介軟體
瞭解如何將 Nuxt 2 的外掛和中介軟體遷移到 Nuxt 3。
外掛
外掛現在有不同的格式，並且只接受一個引數 (nuxtApp)。
export default (ctx, inject) => {
inject('injected', () => 'my injected function')
}
export default defineNuxtPlugin((nuxtApp) => {
// now available on `nuxtApp.$injected`
nuxtApp.provide('injected', () => 'my injected function')
// You can alternatively use this format, which comes with automatic type support
return {
provide: {
injected: () => 'my injected function',
},
}
})
遷移
- 遷移您的外掛以使用
defineNuxtPlugin輔助函式。 - 從您的
nuxt.config外掛陣列中刪除任何位於app/plugins/資料夾中的條目。此目錄中頂層的所有檔案（以及任何子目錄中的 index 檔案）將自動註冊。您可以在檔名中指示模式，而不是將mode設定為client或server。例如，~/plugins/my-plugin.client.ts將僅在客戶端載入。
路由中介軟體
路由中介軟體有不同的格式。
export default function ({ store, redirect }) {
// If the user is not authenticated
if (!store.state.authenticated) {
return redirect('/login')
}
}
export default defineNuxtRouteMiddleware((to, from) => {
const auth = useState('auth')
if (!auth.value.authenticated) {
return navigateTo('/login')
}
})
與 Nuxt 2 非常相似，放置在 ~/middleware 資料夾中的路由中介軟體會自動註冊。然後您可以在元件中按名稱指定它。但是，這是透過 definePageMeta 而不是作為元件選項完成的。
navigateTo 是眾多路由輔助函式之一。
遷移
- 遷移您的路由中介軟體以使用
defineNuxtRouteMiddleware輔助函式。 - 任何全域性中介軟體（例如在您的
nuxt.config中）都可以放置在您的~/middleware資料夾中，並帶有.global副檔名，例如~/middleware/auth.global.ts。