新的 Composition API

Nuxt Bridge 实现了与 Nuxt 3 兼容的组合式函数。

通过从 @nuxtjs/composition-api 迁移到与 Nuxt 3 兼容的 API，在向 Nuxt 3 迁移时将需要更少的重写。

`ssrRef` 和 `shallowSsrRef`

这两个函数已被一个新的组合式函数取代，它在底层工作方式非常相似：useState。

主要区别在于，你必须为该状态提供一个_键_（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')
  // 访问状态
  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 store 实例，你可以使用 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”部分）。

请注意，尽管名称相似，但 API 完全不同。重要的是，你不应尝试在组合式函数外部更改其他变量的值（就像你之前可能对 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'))
+ // 或者，更简单！
+ 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'))
+ // 或者，更简单！
+ const { data: posts, refresh } = useLazyFetch('/api/posts')
  function updatePosts() {
-   return fetch()
+   return refresh()
  }
</script>

`useMeta`

为了与 vue-meta 交互，你可以使用 useNuxt2Meta，它将在 Nuxt Bridge 中工作（但不适用于 Nuxt 3），并将允许你以 vue-meta 兼容的方式操作你的 meta 标签。

<script setup>
- import { useMeta } from '@nuxtjs/composition-api'
  useNuxt2Meta({
    title: 'My Nuxt App',
  })
</script>

你也可以传入 computed 值或 ref，meta 值会响应式地更新：

<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。

nuxt.config.ts

export default defineNuxtConfig({
  imports: {
    autoImport: false,
  },
})

这将完全禁用自动导入，但仍然可以使用来自 #imports 的显式导入。