Nuxt3中useNuxtApp的provide方法源码解析和使用方式

官方示例

provide源码实现

// nuxtApp定义的provide方法
nuxtApp.provide = (name, value) => {
  // 名称添加 $ 符合  
  const $name = "$" + name;
  // nuxtApp中添加 $name 方法
  defineGetter(nuxtApp, $name, value);
  // 添加Vue实例中添加全局 $name 方法
  defineGetter(nuxtApp.vueApp.config.globalProperties, $name, value);
};

// vue实例对象上添加 $nuxt 属性
defineGetter(nuxtApp.vueApp, "$nuxt", nuxtApp);
// 添加Vue实例中全局方法 $nuxt 属性
defineGetter(nuxtApp.vueApp.config.globalProperties, "$nuxt", nuxtApp);

// 对象添加get方法
function defineGetter(obj, key, val) {
  Object.defineProperty(obj, key, { get: () => val });
}

使用示例

// 示例一：官方方式

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)

// 输出 "Hello name!"
console.log(nuxtApp.$hello('name'))

// 示例二：在vue组件中,因为provide在vue实例中添加了全家方法，在vue组件中可以直接使用,如：

this.$hello('name')