refactor!: pinia store 改为自动导入

plop-templates/store/index.hbs

@@ -1,4 +1,4 @@
-const use{{ properCase name }}Store = defineStore(
+export const use{{ properCase name }}Store = defineStore(
   // 唯一ID
   '{{ camelCase name }}',
   () => {
@@ -9,5 +9,3 @@ const use{{ properCase name }}Store = defineStore(
     }
   },
 )
-
-export default use{{ properCase name }}Store

plop-templates/store/prompt.js

@@ -19,7 +19,7 @@ export default {
     const actions = [
       {
         type: 'add',
-        path: 'src/store/modules/{{camelCase name}}.ts',
+        path: 'src/store/{{camelCase name}}.ts',
         templateFile: 'plop-templates/store/index.hbs',
       },
     ]

src/App.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
 import { ua } from '@/utils/ua'
 import Provider from './ui/provider/index.vue'
 

src/api/index.ts

@@ -1,7 +1,6 @@
 import axios from 'axios'
 // import qs from 'qs'
 import { toast } from 'vue-sonner'
-import useUserStore from '@/store/modules/user'
 
 // 请求重试配置
 const MAX_RETRY_COUNT = 3 // 最大重试次数

src/components/AccountButton/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'
 import { cn } from '@/utils'
 import eventBus from '@/utils/eventBus'
 import Profile from './profile.vue'

src/components/AccountForm/EditPasswordForm.vue

@@ -3,7 +3,6 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { toast } from 'vue-sonner'
 import * as z from 'zod'
-import useUserStore from '@/store/modules/user'
 import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({

src/components/AccountForm/LoginForm.vue

@@ -2,7 +2,6 @@
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import * as z from 'zod'
-import useUserStore from '@/store/modules/user'
 import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
 
 defineOptions({

src/layouts/components/AppSetting/index.vue

@@ -2,8 +2,6 @@
 import { useClipboard } from '@vueuse/core'
 import { toast } from 'vue-sonner'
 import settingsDefault from '@/settings.default'
-import useMenuStore from '@/store/modules/menu'
-import useSettingsStore from '@/store/modules/settings'
 import eventBus from '@/utils/eventBus'
 import { diffTwoObj } from '@/utils/object'
 

src/layouts/components/Header/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { useSlots } from '@/slots'
-import useMenuStore from '@/store/modules/menu'
-import useSettingsStore from '@/store/modules/settings'
 import Logo from '../Logo/index.vue'
 
 defineOptions({

src/layouts/components/HotkeysIntro/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
 import eventBus from '@/utils/eventBus'
 
 defineOptions({

src/layouts/components/Logo/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import imgLogo from '@/assets/images/logo.svg'
-import useSettingsStore from '@/store/modules/settings'
 
 defineOptions({
   name: 'Logo',

src/layouts/components/MainSidebar/index.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import hotkeys from 'hotkeys-js'
 import { useSlots } from '@/slots'
-import useMenuStore from '@/store/modules/menu'
-import useSettingsStore from '@/store/modules/settings'
 import Logo from '../Logo/index.vue'
 
 defineOptions({

src/layouts/components/SubSidebar/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { useSlots } from '@/slots'
-import useMenuStore from '@/store/modules/menu'
-import useSettingsStore from '@/store/modules/settings'
 import Logo from '../Logo/index.vue'
 import Menu from '../Menu/index.vue'
 

src/layouts/components/Topbar/Tabbar/index.vue

@@ -4,8 +4,6 @@ import { useMagicKeys } from '@vueuse/core'
 import hotkeys from 'hotkeys-js'
 import { toast } from 'vue-sonner'
 import { useSlots } from '@/slots'
-import useSettingsStore from '@/store/modules/settings'
-import useTabbarStore from '@/store/modules/tabbar'
 
 defineOptions({
   name: 'Tabbar',

src/layouts/components/Topbar/Toolbar/Breadcrumb/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { compile } from 'path-to-regexp'
-import useSettingsStore from '@/store/modules/settings'
 import Breadcrumb from '../../../Breadcrumb/index.vue'
 import BreadcrumbItem from '../../../Breadcrumb/item.vue'
 

src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
-
 defineOptions({
   name: 'ColorScheme',
 })

src/layouts/components/Topbar/Toolbar/Fullscreen/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useFullscreen } from '@vueuse/core'
-import useSettingsStore from '@/store/modules/settings'
 
 defineOptions({
   name: 'Fullscreen',

src/layouts/components/Topbar/Toolbar/NavSearch/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
 import Search from './search.vue'
 
 defineOptions({

src/layouts/components/Topbar/Toolbar/NavSearch/search.vue

@@ -4,9 +4,6 @@ import { useFocus } from '@vueuse/core'
 import hotkeys from 'hotkeys-js'
 import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
 import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
-import useMenuStore from '@/store/modules/menu'
-import useRouteStore from '@/store/modules/route'
-import useSettingsStore from '@/store/modules/settings'
 import { resolveRoutePath } from '@/utils'
 
 defineOptions({

src/layouts/components/Topbar/Toolbar/PageReload/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import hotkeys from 'hotkeys-js'
-import useSettingsStore from '@/store/modules/settings'
 
 defineOptions({
   name: 'PageReload',

src/layouts/components/Topbar/Toolbar/leftSide.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useSlots } from '@/slots'
-import useSettingsStore from '@/store/modules/settings'
 import Breadcrumb from './Breadcrumb/index.vue'
 
 defineOptions({

src/layouts/components/Topbar/Toolbar/rightSide.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useSlots } from '@/slots'
-import useSettingsStore from '@/store/modules/settings'
 import ColorScheme from './ColorScheme/index.vue'
 import Fullscreen from './Fullscreen/index.vue'
 import NavSearch from './NavSearch/index.vue'

src/layouts/components/Topbar/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
-import useSettingsStore from '@/store/modules/settings'
 import Tabbar from './Tabbar/index.vue'
 import Toolbar from './Toolbar/index.vue'
 

src/layouts/index.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import { useSlots } from '@/slots'
-import useKeepAliveStore from '@/store/modules/keepAlive'
-import useMenuStore from '@/store/modules/menu'
-import useSettingsStore from '@/store/modules/settings'
 import eventBus from '@/utils/eventBus'
 import AppSetting from './components/AppSetting/index.vue'
 import Header from './components/Header/index.vue'

src/router/extensions.ts

@@ -1,7 +1,5 @@
 import type { RouteLocationRaw, Router } from 'vue-router'
 import pinia from '@/store'
-import useSettingsStore from '@/store/modules/settings'
-import useTabbarStore from '@/store/modules/tabbar'
 
 function getId(router: Router) {
   return router.currentRoute.value.fullPath

src/router/guards.ts

@@ -1,10 +1,5 @@
 import type { Router, RouteRecordRaw } from 'vue-router'
 import { useNProgress } from '@vueuse/integrations/useNProgress'
-import useKeepAliveStore from '@/store/modules/keepAlive'
-import useMenuStore from '@/store/modules/menu'
-import useRouteStore from '@/store/modules/route'
-import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'
 import { asyncRoutes, asyncRoutesByFilesystem } from './routes'
 import '@/assets/styles/nprogress.css'
 

src/router/index.ts

@@ -1,7 +1,6 @@
 import { loadingFadeOut } from 'virtual:app-loading'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import pinia from '@/store'
-import useSettingsStore from '@/store/modules/settings'
 import setupExtensions from './extensions'
 import setupGuards from './guards'
 // 路由相关数据

src/router/routes.ts

@@ -2,7 +2,6 @@ import type { Route } from '#/global'
 import type { RouteRecordRaw } from 'vue-router'
 import generatedRoutes from 'virtual:generated-pages'
 import { setupLayouts } from 'virtual:meta-layouts'
-import useSettingsStore from '@/store/modules/settings'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
 
 // 固定路由（默认路由）

src/store/modules/keepAlive.ts

@@ -1,4 +1,4 @@
-const useKeepAliveStore = defineStore(
+export const useKeepAliveStore = defineStore(
   // 唯一ID
   'keepAlive',
   () => {
@@ -38,5 +38,3 @@ const useKeepAliveStore = defineStore(
     }
   },
 )
-
-export default useKeepAliveStore

src/store/modules/menu.ts

@@ -4,10 +4,8 @@ import { cloneDeep } from 'es-toolkit'
 import apiApp from '@/api/modules/app'
 import menu from '@/menu'
 import { resolveRoutePath } from '@/utils'
-import useRouteStore from './route'
-import useSettingsStore from './settings'
 
-const useMenuStore = defineStore(
+export const useMenuStore = defineStore(
   // 唯一ID
   'menu',
   () => {
@@ -217,5 +215,3 @@ const useMenuStore = defineStore(
     }
   },
 )
-
-export default useMenuStore

src/store/modules/route.ts

@@ -4,9 +4,8 @@ import { cloneDeep } from 'es-toolkit'
 import { createRouterMatcher } from 'vue-router'
 import apiApp from '@/api/modules/app'
 import { systemRoutes as systemRoutesRaw } from '@/router/routes'
-import useSettingsStore from './settings'
 
-const useRouteStore = defineStore(
+export const useRouteStore = defineStore(
   // 唯一ID
   'route',
   () => {
@@ -169,5 +168,3 @@ const useRouteStore = defineStore(
     }
   },
 )
-
-export default useRouteStore

src/store/modules/settings.ts

@@ -4,7 +4,7 @@ import { cloneDeep } from 'es-toolkit'
 import settingsDefault from '@/settings'
 import { merge } from '@/utils/object'
 
-const useSettingsStore = defineStore(
+export const useSettingsStore = defineStore(
   // 唯一ID
   'settings',
   () => {
@@ -172,5 +172,3 @@ const useSettingsStore = defineStore(
     }
   },
 )
-
-export default useSettingsStore

src/store/modules/tabbar.ts

@@ -1,8 +1,7 @@
 import type { Tabbar } from '#/global'
 import type { RouteLocationNormalized } from 'vue-router'
-import useKeepAliveStore from './keepAlive'
 
-const useTabbarStore = defineStore(
+export const useTabbarStore = defineStore(
   // 唯一ID
   'tabbar',
   () => {
@@ -159,5 +158,3 @@ const useTabbarStore = defineStore(
     }
   },
 )
-
-export default useTabbarStore

src/store/modules/user.ts

@@ -1,11 +1,7 @@
 import apiUser from '@/api/modules/user'
 import router from '@/router'
-import useMenuStore from './menu'
-import useRouteStore from './route'
-import useSettingsStore from './settings'
-import useTabbarStore from './tabbar'
 
-const useUserStore = defineStore(
+export const useUserStore = defineStore(
   // 唯一ID
   'user',
   () => {
@@ -109,5 +105,3 @@ const useUserStore = defineStore(
     }
   },
 )
-
-export default useUserStore

src/types/auto-imports.d.ts

@@ -71,15 +71,21 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useGlobalProperties: typeof import('../utils/composables/useGlobalProperties')['default']
   const useId: typeof import('vue')['useId']
+  const useKeepAliveStore: typeof import('../store/modules/keepAlive')['useKeepAliveStore']
   const useLink: typeof import('vue-router')['useLink']
   const useMainPage: typeof import('../utils/composables/useMainPage')['default']
   const useMenu: typeof import('../utils/composables/useMenu')['default']
+  const useMenuStore: typeof import('../store/modules/menu')['useMenuStore']
   const useModel: typeof import('vue')['useModel']
   const useRoute: typeof import('vue-router')['useRoute']
+  const useRouteStore: typeof import('../store/modules/route')['useRouteStore']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useSettingsStore: typeof import('../store/modules/settings')['useSettingsStore']
   const useSlots: typeof import('vue')['useSlots']
   const useTabbar: typeof import('../utils/composables/useTabbar')['default']
+  const useTabbarStore: typeof import('../store/modules/tabbar')['useTabbarStore']
   const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const useUserStore: typeof import('../store/modules/user')['useUserStore']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']

src/ui/components/FaCopyright/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
-
 defineOptions({
   name: 'FaCopyright',
 })

src/ui/components/FaNotAllowed/index.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
-import useTabbarStore from '@/store/modules/tabbar'
-
 defineOptions({
   name: 'FaNotAllowed',
 })

src/ui/components/FaToast/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
 import { Toaster } from './sonner'
 import 'vue-sonner/style.css'
 

src/ui/provider/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import zhCN from 'element-plus/es/locale/lang/zh-cn.mjs'
-import useSettingsStore from '@/store/modules/settings'
 
 const settingsStore = useSettingsStore()
 

src/utils/composables/useAuth.ts

@@ -1,6 +1,3 @@
-import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'
-
 export default function useAuth() {
   function hasPermission(permission: string) {
     const settingsStore = useSettingsStore()

src/utils/composables/useMainPage.ts

@@ -1,5 +1,3 @@
-import useSettingsStore from '@/store/modules/settings'
-
 export default function useMainPage() {
   const router = useRouter()
 

src/utils/composables/useMenu.ts

@@ -1,6 +1,3 @@
-import useMenuStore from '@/store/modules/menu'
-import useSettingsStore from '@/store/modules/settings'
-
 export default function useMenu() {
   const router = useRouter()
 

src/utils/composables/useTabbar.ts

@@ -1,6 +1,5 @@
 import type { RouteLocationRaw } from 'vue-router'
 import { toast } from 'vue-sonner'
-import useTabbarStore from '@/store/modules/tabbar'
 
 export default function useTabbar() {
   const route = useRoute()

src/views/[...all].vue

@@ -7,8 +7,6 @@ meta:
 </route>
 
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
-
 const router = useRouter()
 
 const settingsStore = useSettingsStore()

src/views/login.vue

@@ -10,7 +10,6 @@ import LoginForm from '@/components/AccountForm/LoginForm.vue'
 import RegisterForm from '@/components/AccountForm/RegisterForm.vue'
 import ResetPasswordForm from '@/components/AccountForm/ResetPasswordForm.vue'
 import ColorScheme from '@/layouts/components/Topbar/Toolbar/ColorScheme/index.vue'
-import useSettingsStore from '@/store/modules/settings'
 
 defineOptions({
   name: 'Login',

vite/plugins.ts

@@ -54,7 +54,8 @@ export default function createVitePlugins(mode: string, isBuild = false) {
       ],
       dts: './src/types/auto-imports.d.ts',
       dirs: [
-        './src/utils/composables/**',
+        './src/store/modules',
+        './src/utils/composables',
       ],
     }),