RE: RE: Nuxt开发指南
You are viewing a single comment's thread from:

RE: Nuxt开发指南

Words
0
Reading
0 min
9M
1. plugins/目录 -> myPlugin.ts
2. myPlugin.ts
export default defineNuxtPlugin(nuxtApp => {
  // Doing something with nuxtApp
})
export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})
<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>
<script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>

//Nuxt 上下文:NuxtApp
我们看到定义插件时,可以获取到 nuxtApp 对象,该对象是 NuxtApp 的实例,实际上是 Nuxt 提供的运行时上下文,可以同时用于客户端和服务端,并能帮我们访问 Vue实例、运行时钩子、运行时配置的变量、内部状态等。

我们需要了解 nuxtApp 一些重要的方法和属性以便使用:
    provide (name, value):定义全局变量和方法;
    hook(name, cb):定义 nuxt 钩子函数;
    vueApp:获取 vue 实例;
    ssrContext:服务端渲染时的上下文;
    payload:从服务端到客户端传递的数据和状态;
    isHydrating:用于检测是否正在客户端注水过程中。
@lemooljiang: 1. plugins/目录 | Ecency