关于naiveui的message相关api在全局使用的方式

相信看过官方文档的同学都知道应该将useMessage()的对象放到window上，但要是不想放到widow上呢？此时我想到了将这个对象放到一个文件导出的对象上，在App.vue上赋值，然后在想用该api的文件中导入就ok了。附上我的代码(ts代码，欢迎有其他想法的人一起探讨)：

第一步: 先在utils文件夹下创建一个naiveui.ts文件，内容为：

import type { DialogApiInjection } from "naive-ui/es/dialog/src/DialogProvider";
import type { MessageApiInjection } from "naive-ui/es/message/src/MessageProvider";

interface Naiveui {
  message: MessageApiInjection,
  dialog: DialogApiInjection
}
const naiveui: Naiveui = {
  //@ts-ignore
  message: {},
  //@ts-ignore
  dialog: {}
}

export default naiveui;

第二步: 在components文件夹下创建message-api.vue文件，内容为：

<template>
  <div></div>
</template>
<script lang="ts" setup>
// import naiveui from '@/utils/naiveui';
import { useMessage } from 'naive-ui';
naiveui.message = useMessage();
</script>

tips: 我使用unplugin-auto-import/vite插件，所以不用手动导入naiveui.ts就能使用，github地址：unplugin-auto-import/vite

第三步: 在App.vue里引入这个组件

<template>
  <n-config-provider>
    <n-message-provider>
      <message-api></message-api>
    </n-message-provider>
    <router-view></router-view>
  </n-config-provider>
</template>
<script setup lang="ts">

import MessageApi from './components/message-api.vue';

</script>

第四步: 在想用的地方使用该方法就可以了

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [{
    path: '/',
    name: 'index',
    component: () => import('../views/index.vue'),
    beforeEnter: (to) => {
      naiveui.message.info('测试');
    }
  }]
})

export default router

至此，本次分享到此结束