From e5c239dcf8f7cb1998e21f955fec45e3fddd5563 Mon Sep 17 00:00:00 2001
From: markthree <1801982702@qq.com>
Date: Tue, 1 Feb 2022 20:51:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AE=E7=BA=A7=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                       | 78 +++++++++++++++++++++++++++++----
 presets/shared/resolvers.ts     | 26 +++++++++++
 presets/tov.ts                  | 12 ++++-
 presets/types/auto-imports.d.ts |  1 +
 src/composables/dark.ts         |  2 -
 src/composables/useDarks.ts     |  4 ++
 src/pages/Index.vue             |  5 ++-
 7 files changed, 113 insertions(+), 15 deletions(-)
 create mode 100644 presets/shared/resolvers.ts
 delete mode 100644 src/composables/dark.ts
 create mode 100644 src/composables/useDarks.ts

diff --git a/README.md b/README.md
index b117ecb..577d800 100644
--- a/README.md
+++ b/README.md
@@ -29,10 +29,10 @@
 20. 支持 Markdown 渲染
 21. 路径别名 `~` 支持
 22. 命令行自动创建与删除
-23. `i18n` 国际化支持
-24. 漂亮的 `404页` 支持
-25. `tsx` 支持
-26. `gzip` 资源压缩支持
+23. i18n 国际化支持
+24. 漂亮的 404页 支持
+25. tsx 支持
+26. gzip 资源压缩支持
 
 <br />
 <br />
@@ -327,7 +327,61 @@ const doubled = computed(() => count.value * 2)
 1. vue
 2. pinia
 3. vueuse
-4. vue-router
+4. vue-i18n
+5. vue-router
+
+当然还有项目中的自动引入，只需要满足以下规范即可。
+
+1. `src/composables` 下凡是 `use` 开头的模块，同时里边有与模块相同的命名导出，该导出就可以按需自动引入。
+
+例如有个 `src/composables/useFoo.ts`
+
+```ts
+// src/composables/useFoo.ts
+
+// 与模块相同命名的导出
+export const useFoo = () => 100
+```
+
+此时就不再需要 `import`了
+
+```html
+<script setup lang="ts">
+    const foo = useFoo()
+    console.log(foo) // 将输出 100
+</script>
+```
+
+2. `src/stores` 下凡是 `Store` 结尾的模块，同时里边有与模块相同的命名导出，该导出就可以按需自动引入。
+
+例如有个 `src/stores/counterStore.ts`
+
+```ts
+// 与模块相同命名的导出
+export const counterStore = defineStore('counter', {
+    state() {
+        return {
+            counter: 1
+        }
+    },
+    actions: {
+        inc() {
+            this.counter++
+        }
+    }
+})
+```
+此时就不再需要 `import`了
+
+```html
+<script setup lang="ts">
+    const store = counterStore()
+</script>
+
+<template>
+    <div @click="store.inc()">{{store.counter}}</div>
+</template>
+```
 
 <br />
 
@@ -500,21 +554,27 @@ pnpm run analysis:build
 
 `src/composables` 目录用来存储 `composition-api` 模块。
 
-该目录下预设了`dark` 模块，该模块导出 `isDark` 和 `toggleDark` 用来显示和切换暗黑模式。
+该目录下预设了`useDarks` 模块，该模块导出 `isDark` 和 `toggleDark` 用来显示和切换暗黑模式。
 
 ```ts
-// src/composables/dark.ts
+// src/composables/useDarks.ts
 
-// vueuse的api会自动按需引入，无需import
+// vueuse的 api 会自动按需引入，无需import
 export const isDark = useDark()
 export const toggleDark = useToggle(isDark)
+
+// 符合自动引入标准
+export const useDarks = () => ({ isDark, toggleDark })
 ```
 
 模板中即可直接用
 
 ```html
 <script setup lang="ts">
-import { isDark, toggleDark } from "../composables/dark";
+import { isDark, toggleDark } from "../composables/useDarks";
+
+// 或者使用自动按需引入
+// const { isDark, toggleDark } = useDarks()
 </script>
 
 <template>
diff --git a/presets/shared/resolvers.ts b/presets/shared/resolvers.ts
new file mode 100644
index 0000000..e91cca3
--- /dev/null
+++ b/presets/shared/resolvers.ts
@@ -0,0 +1,26 @@
+import { Resolver } from 'unplugin-auto-import/dist/types'
+
+/**
+ * 组合式 api 自动引入解析器
+ */
+export const ComposablesResolver: Resolver = name => {
+	const inComposables =
+		name.startsWith('use') && !name.endsWith('Store')
+	if (inComposables) {
+		return {
+			path: `~/composables/${name}`
+		}
+	}
+}
+
+/**
+ * store 自动引入解析器
+ */
+export const StoresResolver: Resolver = name => {
+	const inStores = name.endsWith('Store')
+	if (inStores) {
+		return {
+			path: `~/stores/${name}`
+		}
+	}
+}
diff --git a/presets/tov.ts b/presets/tov.ts
index aa2f94c..109b657 100644
--- a/presets/tov.ts
+++ b/presets/tov.ts
@@ -20,6 +20,10 @@ import I18n from '@intlify/vite-plugin-vue-i18n'
 import ViteRestart from 'vite-plugin-restart'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import viteCompression from 'vite-plugin-compression'
+import {
+	StoresResolver,
+	ComposablesResolver
+} from './shared/resolvers'
 
 const markdownWrapperClasses =
 	'prose md:prose-lg lg:prose-lg dark:prose-invert text-left p-10 prose-slate prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600'
@@ -70,7 +74,11 @@ export default () => {
 				'vue-router',
 				'@vueuse/core'
 			],
-			resolvers: [ElementPlusResolver()]
+			resolvers: [
+				StoresResolver,
+				ComposablesResolver,
+				ElementPlusResolver()
+			]
 		}),
 		I18n({
 			runtimeOnly: true,
@@ -78,7 +86,7 @@ export default () => {
 			include: [resolve(__dirname, '../locales/**')]
 		}),
 		ViteRestart({
-			restart: ['presets/tov.[jt]s']
+			restart: ['presets/tov.[jt]s', 'presets/shared/**/*']
 		}),
 		vueJsx(),
 		viteCompression()
diff --git a/presets/types/auto-imports.d.ts b/presets/types/auto-imports.d.ts
index 1f6072d..4125cb0 100644
--- a/presets/types/auto-imports.d.ts
+++ b/presets/types/auto-imports.d.ts
@@ -110,6 +110,7 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
+  const useDarks: typeof import('~/composables/useDarks')['useDarks']
   const useDebounce: typeof import('@vueuse/core')['useDebounce']
   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
diff --git a/src/composables/dark.ts b/src/composables/dark.ts
deleted file mode 100644
index a2a21dd..0000000
--- a/src/composables/dark.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const isDark = useDark()
-export const toggleDark = useToggle(isDark)
diff --git a/src/composables/useDarks.ts b/src/composables/useDarks.ts
new file mode 100644
index 0000000..1f9980e
--- /dev/null
+++ b/src/composables/useDarks.ts
@@ -0,0 +1,4 @@
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+export const useDarks = () => ({ isDark, toggleDark })
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 688500b..32a9032 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { isDark, toggleDark } from "~/composables/dark";
-
 const { t, locale } = useI18n()
 
+const { isDark, toggleDark } = useDarks()
+
+
 const toggleLocale = () => {
     locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
 }