Nuxt 3 笔记：运行机制与上下文

[cssmagic]

概述

• nuxt —— “Build Core”。

  当 nuxi dev 或 nuxi build 时，会建立一个公共的上下文。它保存了与 nuxt.config 合并之后的格式化的选项、一些内部状态、hook 系统，允许组件之间相互通信。

  这个上下文可以在全局通过 nuxt/kit 的组合式 API 来访问。因此每个进程只允许运行一个 Nuxt 实例。

  如果想扩展 nuxt 的接口，或在构建流程中 hook 各个阶段，可以使用 “Nuxt 模块”。

• nuxtApp —— “Runtime Core”。

  在 setup 阶段和组合式函数中，可以通过 useNuxtApp() 来获取这个上下文。在其他地方，只能在浏览器端获取这个上下文——因为要避免进程间共享上下文。

  如果想扩展 nuxtApp 的接口，或 hook 各个阶段，或访问这个上下文，可以使用 “Nuxt 插件”。

nuxtApp 的接口

const nuxtApp = {
	vueApp, // 全局 Vue 应用

	// 以面这几个允许你调用或添加运行时 hooks
	hooks,
	hook,
	callHook,

	// 仅限服务端访问
	ssrContext: {
		url,
		req,
		res,
		runtimeConfig,
		noSSR,
	},

	// 这个字段会被序列化，并从服务器端传递到客户端
	payload: {
		serverRendered: true,
		data: {},
		state: {}
	},

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

	isHydrating,	// bool
}

运行时上下文 vs 构建时上下文

这两者是隔离的。因此它们不能共享状态、代码、上下文，除了运行时配置。

• nuxt.config 和 Nuxt 模块用于扩展构建时上下文
• Nuxt 插件可以扩展运行时上下文

当构建一个生产阶段的应用时，nuxi build 会在 .output/ 目录中生成一个独立的构建，不受 nuxt.config 和 Nuxt 模块的影响。

---

SSR 上下文

在 ssrContext 中可以获取当前请求及其响应。我们可以通过它在服务端获取当前域名。

useNuxtApp().ssrContext.event.node.req.headers.host

// OR
useNuxtApp().ssrContext.req.headers.host

注意：在取 ssrContext 时可能需要判断一下 process.server。

也可以通过 useRequestEvent() API 来获取当前请求。

---

• 英文博客：Nuxt 2 与 3 的 context 对比