perf: 单独拆分 naive 全局 API 挂载方法

src/main.ts

@@ -1,6 +1,6 @@
 import './styles/tailwind.css';
 import { createApp } from 'vue';
-import { setupNaive, setupDirectives } from '@/plugins';
+import { setupNaiveDiscreteApi, setupNaive, setupDirectives } from '@/plugins';
 import App from './App.vue';
 import router, { setupRouter } from './router';
 import { setupStore } from '@/store';
@@ -8,9 +8,15 @@ import { setupStore } from '@/store';
 async function bootstrap() {
   const app = createApp(App);
 
+  // 挂载状态管理
+  setupStore(app);
+
   // 注册全局常用的 naive-ui 组件
   setupNaive(app);
 
+  // 挂载 naive-ui 脱离上下文的 Api
+  setupNaiveDiscreteApi();
+
   // 注册全局自定义组件
   //setupCustomComponents();
 
@@ -20,13 +26,11 @@ async function bootstrap() {
   // 注册全局方法，如：app.config.globalProperties.$message = message
   //setupGlobalMethods(app);
 
-  // 挂载状态管理
-  setupStore(app);
-
   // 挂载路由
-  await setupRouter(app);
+  setupRouter(app);
 
-  // 路由准备就绪后挂载APP实例
+  // 路由准备就绪后挂载 APP 实例
+  // https://router.vuejs.org/api/interfaces/router.html#isready
   await router.isReady();
 
   app.mount('#app', true);

src/plugins/index.ts

@@ -1,4 +1,5 @@
 export { setupNaive } from '@/plugins/naive';
+export { setupNaiveDiscreteApi } from '@/plugins/naiveDiscreteApi';
 export { setupDirectives } from '@/plugins/directives';
 export { setupCustomComponents } from '@/plugins/customComponents';
 export { setupGlobalMethods } from '@/plugins/globalMethods';

src/plugins/naive.ts

@@ -1,35 +1,5 @@
 import type { App } from 'vue';
 import * as NaiveUI from 'naive-ui';
-import { computed } from 'vue';
-import { useDesignSettingStore } from '@/store/modules/designSetting';
-import { store } from '@/store';
-import { lighten } from '@/utils/index';
-
-// NaiveUI 全局方法注册
-const designStore = useDesignSettingStore(store);
-const configProviderPropsRef = computed(() => ({
-  theme: designStore.darkTheme ? NaiveUI.darkTheme : undefined,
-  themeOverrides: {
-    common: {
-      primaryColor: designStore.appTheme,
-      primaryColorHover: lighten(designStore.appTheme, 6),
-      primaryColorPressed: lighten(designStore.appTheme, 6),
-    },
-    LoadingBar: {
-      colorLoading: designStore.appTheme,
-    },
-  },
-}));
-const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
-  ['message', 'dialog', 'notification', 'loadingBar'],
-  {
-    configProviderProps: configProviderPropsRef,
-  }
-);
-window['$message'] = message;
-window['$dialog'] = dialog;
-window['$notification'] = notification;
-window['$loading'] = loadingBar;
 
 const naive = NaiveUI.create({
   components: [

src/plugins/naiveDiscreteApi.ts

@@ -0,0 +1,39 @@
+import * as NaiveUI from 'naive-ui';
+import { computed } from 'vue';
+import { useDesignSettingWithOut } from '@/store/modules/designSetting';
+import { lighten } from '@/utils/index';
+
+/**
+ * 挂载 Naive-ui 脱离上下文的 API
+ * 如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar，可以通过 createDiscreteApi 来构建对应的 API。
+ * https://www.naiveui.com/zh-CN/dark/components/discrete
+ */
+
+export function setupNaiveDiscreteApi() {
+  const designStore = useDesignSettingWithOut();
+
+  const configProviderPropsRef = computed(() => ({
+    theme: designStore.darkTheme ? NaiveUI.darkTheme : undefined,
+    themeOverrides: {
+      common: {
+        primaryColor: designStore.appTheme,
+        primaryColorHover: lighten(designStore.appTheme, 6),
+        primaryColorPressed: lighten(designStore.appTheme, 6),
+      },
+      LoadingBar: {
+        colorLoading: designStore.appTheme,
+      },
+    },
+  }));
+  const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
+    ['message', 'dialog', 'notification', 'loadingBar'],
+    {
+      configProviderProps: configProviderPropsRef,
+    }
+  );
+
+  window['$message'] = message;
+  window['$dialog'] = dialog;
+  window['$notification'] = notification;
+  window['$loading'] = loadingBar;
+}