Naive UI 中如何在自定义JS文件中使用对话框和消息组件

问题背景

在使用Naive UI框架开发Vue应用时，开发者经常需要将一些通用功能封装到独立的JavaScript文件中。然而，当尝试在这些自定义JS文件中直接使用useDialog()和useMessage()方法时，会遇到返回undefined的问题。

问题分析

Naive UI的useDialog()和useMessage()是Vue的组合式API，它们必须在Vue组件的setup函数或<script setup>块中使用。这是因为：

1. 这些方法依赖于Vue的注入系统
2. 需要访问当前组件实例的上下文
3. 在普通JS文件中没有Vue的运行时环境

解决方案

Naive UI提供了createDiscreteApi方法来解决这个问题，它允许创建独立于Vue组件上下文的API实例。

实现步骤

1. 首先导入必要的函数：

import { createDiscreteApi } from 'naive-ui'

2. 创建独立的API实例：

const { message, dialog } = createDiscreteApi(
  ['message', 'dialog']
)

3. 在自定义JS中使用这些实例：

export function logout() {
  return new Promise((res, rej) => {
    dialog.warning({
      title: '提醒',
      content: '确定要退出吗？',
      onPositiveClick() {
        // 处理确认逻辑
      },
      onNegativeClick() {
        message.info('取消退出。')
      }
    })
  })
}

注意事项

1. createDiscreteApi创建的实例是全局的，不需要在每个文件中重复创建
2. 这些实例会自动管理自己的DOM挂载和卸载
3. 样式也会被自动处理，无需额外配置
4. 对于频繁使用的场景，建议将API实例封装在单独的模块中导出

最佳实践

对于大型项目，推荐将Naive UI的离散API统一管理：

1. 创建src/utils/naive-ui.js文件
2. 集中创建并导出所有需要的API
3. 其他模块导入这些实例使用

// src/utils/naive-ui.js
import { createDiscreteApi } from 'naive-ui'

export const { message, dialog, notification, loadingBar } = createDiscreteApi(
  ['message', 'dialog', 'notification', 'loadingBar']
)

通过这种方式，可以确保项目中所有自定义JS文件都能一致地使用Naive UI的功能，同时保持代码的整洁和可维护性。