🦄 refactor: 重构代码将 Vuex替换为 Pinia

集成 Pinia 状态管理

src/renderer/layout/AppLayout.vue

@@ -21,18 +21,18 @@
             </router-view>
           </div>
           <play-bottom height="5rem" />
-          <app-menu v-if="isMobile && !store.state.musicFull" class="menu" :menus="menus" />
+          <app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
         </div>
       </div>
       <!-- 底部音乐播放 -->
-      <play-bar v-show="isPlay" :style="isMobile && store.state.musicFull ? 'bottom: 0;' : ''" />
+      <play-bar v-show="isPlay" :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''" />
       <!-- 下载管理抽屉 -->
       <download-drawer
         v-if="
           isElectron &&
-          (store.state.setData?.alwaysShowDownloadButton ||
-            store.state.showDownloadDrawer ||
-            store.state.hasDownloadingTasks)
+          (settingsStore.setData?.alwaysShowDownloadButton ||
+            settingsStore.showDownloadDrawer ||
+            settingsStore.setData?.hasDownloadingTasks)
         "
       />
     </div>
@@ -46,13 +46,15 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, nextTick, onMounted, provide, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { useStore } from 'vuex';
 
 import DownloadDrawer from '@/components/common/DownloadDrawer.vue';
 import InstallAppModal from '@/components/common/InstallAppModal.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import UpdateModal from '@/components/common/UpdateModal.vue';
 import homeRouter from '@/router/home';
+import { useMenuStore } from '@/store/modules/menu';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron, isMobile } from '@/utils';
 
 const keepAliveInclude = computed(() =>
@@ -73,26 +75,28 @@ const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'))
 const ArtistDrawer = defineAsyncComponent(() => import('@/components/common/ArtistDrawer.vue'));
 const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));
 
-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+const menuStore = useMenuStore();
 
-const isPlay = computed(() => store.state.isPlay as boolean);
-const { menus } = store.state;
+const isPlay = computed(() => playerStore.playMusic && playerStore.playMusic.id);
+const { menus } = menuStore;
 const route = useRoute();
 
 onMounted(() => {
-  store.dispatch('initializeSettings');
-  store.dispatch('initializeTheme');
+  settingsStore.initializeSettings();
+  settingsStore.initializeTheme();
 });
 
 const artistDrawerRef = ref<InstanceType<typeof ArtistDrawer>>();
 const artistDrawerShow = computed({
-  get: () => store.state.showArtistDrawer,
-  set: (val) => store.commit('setShowArtistDrawer', val)
+  get: () => settingsStore.showArtistDrawer,
+  set: (val) => settingsStore.setShowArtistDrawer(val)
 });
 
 // 监听歌手ID变化
 watch(
-  () => store.state.currentArtistId,
+  () => settingsStore.currentArtistId,
   (newId) => {
     if (newId) {
       artistDrawerShow.value = true;

src/renderer/layout/components/MusicFull.vue

@@ -131,7 +131,6 @@
 import { useDebounceFn } from '@vueuse/core';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 import LyricSettings from '@/components/lyric/LyricSettings.vue';
 import {
@@ -143,6 +142,8 @@ import {
   textColors,
   useLyricProgress
 } from '@/hooks/MusicHook';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, isMobile } from '@/utils';
 import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
 
@@ -372,13 +373,15 @@ onBeforeUnmount(() => {
   }
 });
 
-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+
 const handleArtistClick = (id: number) => {
   isVisible.value = false;
-  store.commit('setCurrentArtistId', id);
+  settingsStore.currentArtistId = id;
 };
 
-const setData = computed(() => store.state.setData);
+const setData = computed(() => settingsStore.setData);
 
 // 监听字体变化并更新 CSS 变量
 watch(

src/renderer/layout/components/PlayBar.vue

@@ -13,7 +13,7 @@
         ? textColors.theme === 'dark'
           ? '#000000'
           : '#ffffff'
-        : store.state.theme === 'dark'
+        : settingsStore.theme === 'dark'
           ? '#ffffff'
           : '#000000'
     }"
@@ -178,7 +178,6 @@
 import { useThrottleFn } from '@vueuse/core';
 import { computed, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
 import SongItem from '@/components/common/SongItem.vue';
 import EqControl from '@/components/EQControl.vue';
@@ -193,23 +192,26 @@ import {
   textColors
 } from '@/hooks/MusicHook';
 import { audioService } from '@/services/audioService';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSettingsStore } from '@/store/modules/settings';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
 import { showShortcutToast } from '@/utils/shortcutToast';
 
 import MusicFull from './MusicFull.vue';
 
-const store = useStore();
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
 const { t } = useI18n();
 // 是否播放
-const play = computed(() => store.state.play as boolean);
+const play = computed(() => playerStore.isPlay);
 // 播放列表
-const playList = computed(() => store.state.playList as SongResult[]);
+const playList = computed(() => playerStore.playList as SongResult[]);
 // 背景颜色
 const background = ref('#000');
 
 watch(
-  () => store.state.playMusic,
+  () => playerStore.playMusic,
   async () => {
     background.value = playMusic.value.backgroundColor as string;
   },
@@ -268,7 +270,7 @@ const mute = () => {
 };
 
 // 播放模式
-const playMode = computed(() => store.state.playMode);
+const playMode = computed(() => playerStore.playMode);
 const playModeIcon = computed(() => {
   switch (playMode.value) {
     case 0:
@@ -296,15 +298,15 @@ const playModeText = computed(() => {
 
 // 切换播放模式
 const togglePlayMode = () => {
-  store.commit('togglePlayMode');
+  playerStore.togglePlayMode();
 };
 
 function handleNext() {
-  store.commit('nextPlay');
+  playerStore.nextPlay();
 }
 
 function handlePrev() {
-  store.commit('prevPlay');
+  playerStore.prevPlay();
 }
 
 const MusicFullRef = ref<any>(null);
@@ -313,9 +315,9 @@ const MusicFullRef = ref<any>(null);
 const playMusicEvent = async () => {
   try {
     // 检查是否有有效的音乐对象和 URL
-    if (!playMusic.value?.id || !store.state.playMusicUrl) {
+    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
       console.warn('No valid music or URL available');
-      store.commit('setPlay', playMusic.value);
+      playerStore.setPlay(playMusic.value);
       return;
     }
 
@@ -323,7 +325,7 @@ const playMusicEvent = async () => {
       // 暂停播放
       if (audioService.getCurrentSound()) {
         audioService.pause();
-        store.commit('setPlayMusic', false);
+        playerStore.setPlayMusic(false);
       }
     } else {
       // 开始播放
@@ -332,13 +334,13 @@ const playMusicEvent = async () => {
         audioService.play();
       } else {
         // 如果没有音频实例，重新创建并播放
-        await audioService.play(store.state.playMusicUrl, playMusic.value);
+        await audioService.play(playerStore.playMusicUrl, playMusic.value);
       }
-      store.commit('setPlayMusic', true);
+      playerStore.setPlayMusic(true);
     }
   } catch (error) {
     console.error('播放出错:', error);
-    store.commit('nextPlay');
+    playerStore.nextPlay();
   }
 };
 
@@ -347,31 +349,31 @@ const musicFullVisible = ref(false);
 // 设置musicFull
 const setMusicFull = () => {
   musicFullVisible.value = !musicFullVisible.value;
-  store.commit('setMusicFull', musicFullVisible.value);
+  playerStore.setMusicFull(musicFullVisible.value);
   if (musicFullVisible.value) {
-    store.commit('setShowArtistDrawer', false);
+    settingsStore.showArtistDrawer = false;
   }
 };
 
-const palyListRef = useTemplateRef('palyListRef');
+const palyListRef = useTemplateRef('palyListRef') as any;
 
 const scrollToPlayList = (val: boolean) => {
   if (!val) return;
   setTimeout(() => {
-    palyListRef.value?.scrollTo({ top: store.state.playListIndex * 62 });
+    palyListRef.value?.scrollTo({ top: playerStore.playListIndex * 62 });
   }, 50);
 };
 
 const isFavorite = computed(() => {
-  return store.state.favoriteList.includes(playMusic.value.id);
+  return playerStore.favoriteList.includes(playMusic.value.id);
 });
 
 const toggleFavorite = async (e: Event) => {
   e.stopPropagation();
   if (isFavorite.value) {
-    store.commit('removeFromFavorite', playMusic.value.id);
+    playerStore.removeFromFavorite(playMusic.value.id);
   } else {
-    store.commit('addToFavorite', playMusic.value.id);
+    playerStore.addToFavorite(playMusic.value.id);
   }
 };
 
@@ -381,7 +383,7 @@ const openLyricWindow = () => {
 
 const handleArtistClick = (id: number) => {
   musicFullVisible.value = false;
-  store.commit('setCurrentArtistId', id);
+  settingsStore.currentArtistId = id;
 };
 
 // 添加全局快捷键处理
@@ -392,8 +394,8 @@ if (isElectron) {
       case 'togglePlay':
         playMusicEvent();
         showShortcutToast(
-          store.state.play ? t('player.playBar.play') : t('player.playBar.pause'),
-          store.state.play ? 'ri-pause-circle-line' : 'ri-play-circle-line'
+          play.value ? t('player.playBar.play') : t('player.playBar.pause'),
+          play.value ? 'ri-pause-circle-line' : 'ri-play-circle-line'
         );
         break;
       case 'prevPlay':

src/renderer/layout/components/SearchBar.vue

@@ -16,7 +16,7 @@
           <n-dropdown trigger="hover" :options="searchTypeOptions" @select="selectSearchType">
             <div class="w-20 px-3 flex justify-between items-center">
               <div>
-                {{ searchTypeOptions.find((item) => item.key === store.state.searchType)?.label }}
+                {{ searchTypeOptions.find((item) => item.key === searchStore.searchType)?.label }}
               </div>
               <i class="iconfont icon-xiasanjiaoxing"></i>
             </div>
@@ -28,11 +28,11 @@
       <template #trigger>
         <div class="user-box">
           <n-avatar
-            v-if="store.state.user"
+            v-if="userStore.user"
             class="cursor-pointer"
             circle
             size="medium"
-            :src="getImgUrl(store.state.user.avatarUrl)"
+            :src="getImgUrl(userStore.user.avatarUrl)"
             @click="selectItem('user')"
           />
           <div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">
@@ -41,16 +41,16 @@
         </div>
       </template>
       <div class="user-popover">
-        <div v-if="store.state.user" class="user-header" @click="selectItem('user')">
-          <n-avatar circle size="small" :src="getImgUrl(store.state.user?.avatarUrl)" />
-          <span class="username">{{ store.state.user?.nickname || 'Theodore' }}</span>
+        <div v-if="userStore.user" class="user-header" @click="selectItem('user')">
+          <n-avatar circle size="small" :src="getImgUrl(userStore.user?.avatarUrl)" />
+          <span class="username">{{ userStore.user?.nickname || 'Theodore' }}</span>
         </div>
         <div class="menu-items">
-          <div v-if="!store.state.user" class="menu-item" @click="toLogin">
+          <div v-if="!userStore.user" class="menu-item" @click="toLogin">
             <i class="iconfont ri-login-box-line"></i>
             <span>{{ t('comp.searchBar.toLogin') }}</span>
           </div>
-          <div v-if="store.state.user" class="menu-item" @click="selectItem('logout')">
+          <div v-if="userStore.user" class="menu-item" @click="selectItem('logout')">
             <i class="iconfont ri-logout-box-r-line"></i>
             <span>{{ t('comp.searchBar.logout') }}</span>
           </div>
@@ -60,9 +60,9 @@
             <span>{{ t('comp.searchBar.set') }}</span>
           </div>
           <div class="menu-item">
-            <i class="iconfont" :class="isDarkTheme ? 'ri-moon-line' : 'ri-sun-line'"></i>
+            <i class="iconfont" :class="isDark ? 'ri-moon-line' : 'ri-sun-line'"></i>
             <span>{{ t('comp.searchBar.theme') }}</span>
-            <n-switch v-model:value="isDarkTheme" class="ml-auto">
+            <n-switch v-model:value="isDark" class="ml-auto">
               <template #checked>
                 <i class="ri-moon-line"></i>
               </template>
@@ -105,7 +105,6 @@
 import { computed, onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStore } from 'vuex';
 
 import { getSearchKeyword } from '@/api/home';
 import { getUserDetail } from '@/api/login';
@@ -113,13 +112,20 @@ import alipay from '@/assets/alipay.png';
 import wechat from '@/assets/wechat.png';
 import Coffee from '@/components/Coffee.vue';
 import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSearchStore } from '@/store/modules/search';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
 import { getImgUrl } from '@/utils';
 import { checkUpdate, UpdateResult } from '@/utils/update';
 
 import config from '../../../../package.json';
 
 const router = useRouter();
-const store = useStore();
+const playerStore = usePlayerStore();
+const searchStore = useSearchStore();
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
 const userSetOptions = ref(USER_SET_OPTIONS);
 const { t } = useI18n();
 
@@ -137,15 +143,15 @@ const loadPage = async () => {
   if (!token) return;
   const { data } = await getUserDetail();
   console.log('data', data);
-  store.state.user =
-    data.profile || store.state.user || JSON.parse(localStorage.getItem('user') || '{}');
-  localStorage.setItem('user', JSON.stringify(store.state.user));
+  userStore.user =
+    data.profile || userStore.user || JSON.parse(localStorage.getItem('user') || '{}');
+  localStorage.setItem('user', JSON.stringify(userStore.user));
 };
 
 loadPage();
 
 watchEffect(() => {
-  if (store.state.user) {
+  if (userStore.user) {
     userSetOptions.value = USER_SET_OPTIONS;
   } else {
     userSetOptions.value = USER_SET_OPTIONS.filter((item) => item.key !== 'logout');
@@ -167,9 +173,9 @@ onMounted(() => {
   checkForUpdates();
 });
 
-const isDarkTheme = computed({
-  get: () => store.state.theme === 'dark',
-  set: () => store.commit('toggleTheme')
+const isDark = computed({
+  get: () => settingsStore.theme === 'dark',
+  set: () => settingsStore.toggleTheme()
 });
 
 // 搜索词
@@ -182,7 +188,7 @@ const search = () => {
   }
 
   if (router.currentRoute.value.path === '/search') {
-    store.state.searchValue = value;
+    searchStore.searchValue = value;
     return;
   }
 
@@ -190,13 +196,13 @@ const search = () => {
     path: '/search',
     query: {
       keyword: value,
-      type: store.state.searchType
+      type: searchStore.searchType
     }
   });
 };
 
 const selectSearchType = (key: number) => {
-  store.state.searchType = key;
+  searchStore.searchType = key;
   if (searchValue.value) {
     search();
   }
@@ -208,7 +214,7 @@ const selectItem = async (key: string) => {
   // switch 判断
   switch (key) {
     case 'logout':
-      store.commit('logout');
+      userStore.handleLogout();
       break;
     case 'login':
       router.push('/login');
@@ -250,7 +256,7 @@ const checkForUpdates = async () => {
 
 const toGithubRelease = () => {
   if (updateInfo.value.hasUpdate) {
-    store.commit('setShowUpdateModal', true);
+    settingsStore.showUpdateModal = true;
   } else {
     window.open('https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank');
   }

src/renderer/layout/components/TitleBar.vue

@@ -55,13 +55,13 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 
+import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron } from '@/utils';
 
 const { t } = useI18n();
 
-const store = useStore();
+const settingsStore = useSettingsStore();
 const showCloseModal = ref(false);
 const rememberChoice = ref(false);
 
@@ -80,38 +80,30 @@ const minimize = () => {
 
 const handleAction = (action: 'minimize' | 'close') => {
   if (rememberChoice.value) {
-    store.commit('setSetData', {
-      ...store.state.setData,
+    settingsStore.setSettings({
+      ...settingsStore.setData,
       closeAction: action
     });
   }
 
   if (action === 'minimize') {
-    window.api.miniTray();
+    window.api.minimize();
   } else {
     window.api.close();
   }
   showCloseModal.value = false;
 };
 
-const close = () => {
-  if (!isElectron) {
-    return;
-  }
-
-  const { closeAction } = store.state.setData;
+const handleClose = () => {
+  const { closeAction } = settingsStore.setData;
 
   if (closeAction === 'minimize') {
-    window.api.miniTray();
-    return;
-  }
-
-  if (closeAction === 'close') {
+    window.api.minimize();
+  } else if (closeAction === 'close') {
     window.api.close();
-    return;
+  } else {
+    showCloseModal.value = true;
   }
-
-  showCloseModal.value = true;
 };
 
 const drag = (event: MouseEvent) => {
@@ -120,6 +112,10 @@ const drag = (event: MouseEvent) => {
   }
   window.api.dragStart(event as unknown as string);
 };
+
+const handleThemeChange = () => {
+  settingsStore.toggleTheme();
+};
 </script>
 
 <style scoped lang="scss">