新 Composition API
從 @nuxtjs/composition-api 遷移到 Nuxt 3 相容的 API 後，遷移到 Nuxt 3 時需要重寫的內容會更少。
ssrRef 和 shallowSsrRef
這兩個函式已被一個新的組合式函式取代，它在底層工作方式非常相似：useState。
主要區別在於，您必須為這個狀態提供一個 key（Nuxt 為 ssrRef 和 shallowSsrRef 自動生成），並且它只能在 Nuxt 3 外掛（由 defineNuxtPlugin 定義）或元件例項中呼叫。（換句話說，您不能將 useState 用於全域性/環境上下文，因為存在跨請求共享狀態的風險。）
- import { ssrRef } from '@nuxtjs/composition-api'
- const ref1 = ssrRef('initialData')
- const ref2 = ssrRef(() => 'factory function')
+ const ref1 = useState('ref1-key', () => 'initialData')
+ const ref2 = useState('ref2-key', () => 'factory function')
// accessing the state
console.log(ref1.value)
因為狀態是帶鍵的，所以只要使用相同的鍵，就可以從多個位置訪問相同的狀態。
您可以在Nuxt 3 文件中閱讀有關如何使用此組合式函式的更多資訊。
ssrPromise
此函式已被移除，如果您正在使用它，則需要找到替代實現。如果您有 ssrPromise 的用例，請透過討論告知我們。
onGlobalSetup
此函式已被移除，但其用例可以透過在 defineNuxtPlugin 中使用 useNuxtApp 或 useState 來滿足。您還可以在佈局的 setup() 函式中執行任何自定義程式碼。
- import { onGlobalSetup } from '@nuxtjs/composition-api'
- export default () => {
- onGlobalSetup(() => {
+ export default defineNuxtPlugin((nuxtApp) => {
+ nuxtApp.hook('vue:setup', () => {
// ...
})
- }
+ })
useStore
為了訪問 Vuex 儲存例項，您可以使用 useNuxtApp().$store。
- import { useStore } from '@nuxtjs/composition-api`
+ const { $store } = useNuxtApp()
useContext 和 withContext
您可以使用 useNuxtApp 訪問注入的輔助函式。
- import { useContext } from '@nuxtjs/composition-api`
+ const { $axios } = useNuxtApp()
useNuxtApp() 還提供了一個名為 nuxt2Context 的鍵，其中包含您通常從 Nuxt 2 上下文訪問的所有相同屬性，但建議不要直接使用它，因為它在 Nuxt 3 中將不存在。相反，請檢視是否有其他方法可以訪問您需要的內容。（如果沒有，請提出功能請求或討論。）wrapProperty
此輔助函式不再提供，但您可以使用以下程式碼替換它
import { computed, getCurrentInstance } from 'vue'
const wrapProperty = (property: string, makeComputed = true) => () => {
const vm = getCurrentInstance().proxy
return makeComputed ? computed(() => vm[property]) : vm[property]
}
useAsync 和 useFetch
這兩個組合式函式可以用 useLazyAsyncData 和 useLazyFetch 替換，這些函式在Nuxt 3 文件中有詳細說明。就像之前的 @nuxtjs/composition-api 組合式函式一樣，這些組合式函式不會阻止客戶端的路由導航（因此名稱中帶有“lazy”）。
useFetch 時所做的那樣）。useLazyFetch 必須為 Nitro 配置。從 useAsync 遷移到新的組合式函式
<script setup>
- import { useAsync } from '@nuxtjs/composition-api'
- const posts = useAsync(() => $fetch('/api/posts'))
+ const { data: posts } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
+ // or, more simply!
+ const { data: posts } = useLazyFetch('/api/posts')
</script>
從 useFetch 遷移到新的組合式函式
<script setup>
- import { useFetch } from '@nuxtjs/composition-api'
- const posts = ref([])
- const { fetch } = useFetch(() => { posts.value = await $fetch('/api/posts') })
+ const { data: posts, refresh } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
+ // or, more simply!
+ const { data: posts, refresh } = useLazyFetch('/api/posts')
function updatePosts() {
- return fetch()
+ return refresh()
}
</script>
useMeta
為了與 vue-meta 互動，您可以使用 useNuxt2Meta，它將在 Nuxt Bridge 中工作（但不在 Nuxt 3 中），並允許您以 vue-meta 相容的方式操作您的元標籤。
<script setup>
- import { useMeta } from '@nuxtjs/composition-api'
useNuxt2Meta({
title: 'My Nuxt App',
})
</script>
您還可以傳入計算值或引用，元值將響應式更新。
<script setup>
const title = ref('my title')
useNuxt2Meta({
title,
})
title.value = 'new title'
</script>
useNuxt2Meta() 和 Options API head()，因為行為可能不可預測。Nuxt Bridge 還提供了一個與 Nuxt 3 相容的 meta 實現，可以透過 useHead 組合式函式訪問。
<script setup>
- import { useMeta } from '@nuxtjs/composition-api'
useHead({
title: 'My Nuxt App',
})
</script>
您還需要在 nuxt.config 中明確啟用它。
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
bridge: {
meta: true,
},
})
此 useHead 組合式函式在底層使用 @unhead/vue（而不是 vue-meta）來操作您的 <head>。因此，建議不要同時使用原生 Nuxt 2 head() 屬性和 useHead，因為它們可能會衝突。
有關如何使用此組合式函式的更多資訊，請參閱Nuxt 3 文件。
顯式匯入
Nuxt 將每個自動匯入都暴露為 #imports 別名，必要時可用於進行顯式匯入。
<script setup lang="ts">
import { computed, ref } from '#imports'
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
停用自動匯入
如果您想停用組合式函式和工具的自動匯入，可以在 nuxt.config 檔案中將 imports.autoImport 設定為 false。
export default defineNuxtConfig({
imports: {
autoImport: false,
},
})
這將完全停用自動匯入，但仍然可以使用 #imports 中的顯式匯入。