Vue3如何使用naive-ui的useMessage()问题

前言

node 版本 18
vue 版本 3.4
naive-ui版本 2.37

我看到大家好像对文档的理解有误差，我们来看下要如何使用useMessage

一般我们会这么做
在Vue.app里

<template>
  <n-message-provider>
    <router-view></router-view>
  </n-message-provider>
</template>

<script setup lang='ts'>
import { NMessageProvider } from 'naive-ui' 
</script>

在YourComponet setup里面

import { useMessage } from 'naive-ui'

const message = useMessage()

全局挂载

全局挂载可以在setup外面使用，换句话说，你可以在非.vue的文件中使用。一个典型的应用场景就是axios的拦截器需要调用message.success等

但是我不建议这么做，根据vue的规范ui和controller代码应该分开

在Vue.app里面

<template>
  <n-message-provider>
    <MessageProvider />
  </n-message-provider>
  <router-view></router-view>
</template>

<script setup lang='ts'>
import { NMessageProvider } from 'naive-ui' 
import MessageProvider from '@/components/MessageProvider.vue'
</script>

在components包下新建一个组件MessageProvider

<template></template>


<script setup lang="ts">
import { useMessage } from 'naive-ui'

window.$message = useMessage()
</script>

这样在任何组件里面，我们只需要这样就能使用了

const message = windows.$message

还有一种方法是createDiscreteApi，这种操作不受n-xxx-provider的影响，但也带来了额外的心智负担，不建议新手使用。

有空再写一期使用createDiscreteApi进行全局挂载的~