如何在Naive UI的App.vue中使用useMessage与useNotification？

useMessage 和 useNotification 依赖对应Provider注入的上下文，只有在Provider包裹的子组件的setup中调用才能正常拿到实例。在注册Provider的App.vue根组件setup里直接调用hook时，Provider本身还未完成挂载注入，自然拿不到可用的实例。

方案1：抽离中间层组件（推荐，无时序问题） #

把App.vue里的业务内容、路由出口抽成单独的内层组件，App.vue只负责挂载Provider、引入内层组件，所有需要调用message/notification的逻辑都放到内层组件里，和你之前在content.vue里的写法完全一致。
示例代码：

<!-- App.vue 仅做Provider注册 -->
<template>
  <n-message-provider>
    <n-notification-provider>
      <app-main />
    </n-notification-provider>
  </n-message-provider>
</template>

<script setup>
import AppMain from './AppMain.vue'
</script>

<!-- AppMain.vue 放原App的业务逻辑 -->
<template>
  <router-view />
  <!-- 其他原App里的全局组件、布局内容 -->
</template>

<script setup>
import { onMounted } from 'vue'
import { useMessage, useNotification } from 'naive-ui'

const message = useMessage()
const notification = useNotification()

// 在这里可以直接调用，和子组件用法完全一致
onMounted(() => {
  message.success('应用初始化完成')
  notification.warning({
    content: '这是App层级触发的通知'
  })
})
</script>

方案2：通过ref直接获取Provider实例 #

如果不想额外抽离组件，可以给两个Provider绑定ref，等组件挂载完成后，直接从ref对应的实例上取message和notification的api，不需要走hook调用。
示例代码：

<template>
  <n-message-provider ref="messageProvider">
    <n-notification-provider ref="notificationProvider">
      <router-view />
      <!-- 其他全局内容 -->
    </n-notification-provider>
  </n-message-provider>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const messageProvider = ref(null)
const notificationProvider = ref(null)

// 注意：必须等onMounted之后才能拿到实例，提前调用会报错
onMounted(() => {
  const message = messageProvider.value.message
  const notification = notificationProvider.value.notification

  // 直接调用即可
  message.info('从App层触发消息提示')
  notification.error({
    content: 'App层触发的错误通知'
  })
})
</script>

注意：方案2必须在组件挂载完成后再读取ref上的实例，未挂载时ref值为null，直接调用会抛错。如果是全局要用到的api，更推荐用方案1，写法统一也没有时序限制。

内容的提问来源于stack exchange，提问作者Abubakir Mahkamov