nuxt3中的useNuxtApp使用详解
useNuxtApp返回一个nuxtApp实例主要是提供了一个可以访问nuxt的共享运行时的上下文，此上下文在服务端和客户端都存在。上下文(context)里包括: vue app的实例，运行时的钩子(hooks), 运行时的配置变量和内部状态，例如:ssrContext和payload。
在组合工API，插件，组件中都可以使用此实例。
示例：
<!-- app.vue -->
<script setup>
const nuxtApp = useNuxtApp()
</script>
实例中的方法
provide (name, value)
nuxtApp是一个运行时的上下文， 你可以通过插件来扩展它。使用provide方法就可以创建nuxt 插件，指定name，就可以在所有的组合式API和组件中通过name来调用value指定对象。
示例:
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)
// Prints "Hello name!"
console.log(nuxtApp.$hello('name'))
上例中，$hello 就变成了nuxtApp的一部分了，你可以在任何可以访问nuxtApp的地方使用它。
hook(name, cb)
使用钩子可以在nuxt 应用的运行时切片(aspects)中添加一些自定义的代码逻辑。你可以在vue.js的组合式API和nuxt插件中使用运行时的钩子，将自定义代码插入到渲染生命周期中的各个环节中。
钩子函数通常用在创建插件的时候，有哪些运行时钩子，可以点击链接查看。
示例如下:
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('page:start', () => {
/* your code goes here */
})
nuxtApp.hook('vue:error', (..._args) => {
console.log('vue:error')
// if (process.client) {
// console.log(..._args)
// }
})
})
callhook(name, ...args)
主动调用钩子。例如：
await nuxtApp.callHook('my-plugin:init')
实例中的属性
vueApp
vueApp是vue.js应用实例,假如你熟悉vue, 就知道可以通过此实例注册组件、指令，还有安装vue插件。
更多相关内容可以去vue官网了解。
ssrContext
此属性是在服务端的渲染中创建的，也只能在服务端可用。 通过此属性，你可以访问如下信息:
-
url当前请求的url -
event(unjs/h3 请求事件) -
payloadNuxtApp的payload对象
payload
payload包含着在服务端设置的数据和状态变量， 客户端可以在浏览器中的window.__NUXT__对象中获取到这些数据和状态。
payload中主要包含如下信息:
-
serverRendered (boolean)表示响应的HTML内容(response) 是否是服务端渲染的。 -
data(Object)当你使用useFetch或useAsyncData等接口来获取数据时，结果数据可以在playload.data中获取到。 这些数据被缓存了，如果你再次获取同样的数据时，就会直接从payload.data中获取并返回了。
示例:
export default defineComponent({
async setup() {
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
}
})
上面例子中，第一次调用接口获取数据后，你就可以在payload.data中访问该数据了。当你在客户端通过ssrContext 来访问payload.data时， 你可以得到和服务端一样的数据
-
state(Object)当你使用useState组合去设置共享状态时，这个状态数据可以通过payload.state.[name-of-your-state]方式来获取。
例如:
export const useColor = () => useState<string>('color', () => 'pink')
export default defineNuxtPlugin((nuxtApp) => {
if (process.server) {
const color = useColor()
}
})
isHydrating
使用 nuxtApp.isHydrating (boolean) 可以在客户端检查nuxt 应用是否在激活中。
例如:
export default defineComponent({
setup (_props, { slots, emit }) {
const nuxtApp = useNuxtApp()
onErrorCaptured((err) => {
if (process.client && !nuxtApp.isHydrating) {
// ...
}
})
}
})
版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3中的useNuxtApp使用详解
