# 一、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 为例):

    # 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)

      # 2、fetching 请求

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

        # 3、lazy 选项

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

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

          解决方式如下:

        提示

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

          # 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) 即可

          更新于 : 7/8/2024, 10:21:14 AM