一、NuxtApp

详细内容可以查看：NuxtApp (opens new window)

1、useNuxtApp

详细内容可以查看：How Nuxt Works? (opens new window)

  NuxtApp 的相关属性：

const nuxtApp = {
  vueApp, // the global Vue application: https://vuejs.org/api/application.html#application-api

  versions, // an object containing Nuxt and Vue versions

  // These let you call and add runtime NuxtApp hooks
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // Only accessible on server-side
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // This will be stringified and passed from server to client
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}

2、Nuxt 插件

详细内容可以查看：useNuxtApp (opens new window)、plugins (opens new window)

  使用方式如下（以 provide 为例）：

<script setup>
const nuxtApp = useNuxtApp()

// 注册插件
nuxtApp.provide('hello', (name) => `Hello ${name}!`)

// 使用插件
console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
</script>

• plugins/hello.ts

export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})

• components/Hello.vue

<script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>

<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>

3、生命周期

详细内容可以查看：Lifecycle Hooks - Going Further (opens new window)、Lifecycle Hooks API (opens new window)

  使用方式如下（以 hook 为例）：

• plugins/lifecycle.ts

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:mounted', () => {
    /* your code goes here */
  })
  nuxtApp.hook('app:error', () => {
    /* your code goes here */
  })
  nuxtApp.hook('page:start', () => {
    /* your code goes here */
  })
  // ……
})

4、Pinia 使用

  当在 Nuxt 中使用 pinia 时，你必须先创建一个 Nuxt 插件，这样你才能访问到 pinia 实例。

二、数据交互

1、server 接口

详细内容可以查看：server (opens new window)

• server/api/submit.post.ts

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return { body }
})

• app.vue

<script setup>
async function submit() {
  const { body } = await $fetch('/api/submit', {
    method: 'post',
    body: { test: 123 }
  })
}
</script>

• server/api/query.get.ts

export default defineEventHandler((event) => {
  const query = getQuery(event)

  return { a: query.foo, b: query.baz }
})

• app.vue

<script setup>
async function submit() {
  const { data } = await useAsyncData('item', () =>
    $fetch('/api/query?foo=bar&baz=qux', {
      method: 'get'
    })
  )
}
</script>

2、fetching 请求

详细内容可以查看：Data fetching (opens new window)、$fetch (opens new window)、useFetch (opens new window)

  $fetch 在 SSR 期间，数据被获取两次，一次在服务器上，一次在客户端上

  使用 useAsyncData 包裹，可以实现在 SSR 期间，数据仅在服务器端获取并传输到客户端

<script setup>
const { data: count } = await useAsyncData('item', () => $fetch('/api/count',{
  method: "GET"
  baseURL: BASE_RUL
}))
</script>

<template>Page visits: {{ count }}</template>

  可以将 useFetch 作为 useAsyncData + $fetch 的快捷方式

<script setup lang="ts">
const { data: count } = await useFetch('/api/count', {
  method: "GET"
  baseURL: BASE_RUL,

  // 拦截器
  onRequest({ request, options }) {
    // Set the request headers
    options.headers = options.headers || {}
    options.headers.authorization = '...'
  }
})
</script>

<template>Page visits: {{ count }}</template>

3、lazy 选项

详细内容可以查看：lazy (opens new window)、useLazyAsyncData (opens new window)、useLazyFetch (opens new window)

  默认情况下，在进行 page 切换操作时，新的 page 页面会等 fetching 操作完成后才 mounted 完成（即默认情况下 useFetch 等会阻塞 页面的导航）。

  解决方式如下：

提示

  下面我们使用的是 fetching 请求返回的 pending 来判断请求状态，我们也可以通过使用其返回的 refresh 进行数据请求刷新。

<script setup lang="ts">
const { pending, data: posts } = useFetch('/api/posts', {
  lazy: true
})
</script>

<template>
  <!-- you will need to handle a loading state -->
  <div v-if="pending">Loading ...</div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>

<script setup lang="ts">
/* Navigation will occur before fetching is complete.
  Handle pending and error states directly within your component's template
*/
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))

watch(count, (newCount) => {
  // Because count might start out null, you won't have access
  // to its contents immediately, but you can watch it.
})
</script>

<template>
  <div>
    {{ pending ? 'Loading' : count }}
  </div>
</template>

<script setup lang="ts">
/* Navigation will occur before fetching is complete.
  Handle pending and error states directly within your component's template
*/
const { pending, data: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
  // Because posts might start out null, you won't have access
  // to its contents immediately, but you can watch it.
})
</script>

<template>
  <div v-if="pending">Loading ...</div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>

4、请求封装

  现在我们已经知道了，useFetch 相当于 useAsyncData + $fetch，而$fetch底层使用了 ✨ ofetch (opens new window) 这个网络请求库来处理 Vue app 和 API routes 发出的请求。

ofetch 具体封装过程可以查看个人项目：https://github.com/Lencamo/request-tools/tree/main/ts-ofetch-nuxt

三、全局状态共享

详细内容可以查看：State Management (opens new window)、

1、useState

详细内容可以查看：useState (opens new window)、composables (opens new window)

  Nuxt 中，我们可以直接使用 useState 创建一些可以全局共享的数据

提示

缺点:

  Because the data inside useState will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.

• composables/use-foo.ts

// It will be available as useFoo() (camelCase of file name without extension)
export default function () {
  return useState('foo', () => 'bar')
}

• app.vue

<script setup lang="ts">
const foo = useFoo()
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>

2、Pinia

详细内容可以查看：Nuxt Modules - Pinia (opens new window)、Pinia - Nuxt.js (opens new window)

安装：

npm i @pinia/nuxt pinia

使用：

  在 Nuxt 中使用 Pinia 和平常使用一样即可，引入方式如下：

• nuxt.config.js

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

四、更多

说明

  经过前面的笔记，基本对 Nuxt 有一个基础的认知了，剩余的 Nuxt 内容，个人感觉完全可以根据需求直接阅读：官方文档 (opens new window) 即可