refactor: pinia整合优化重构

src/components/LangSelect/index.vue

@@ -19,9 +19,10 @@
 <script setup lang="ts">
 
 import {computed} from "vue";
-import {useAppStoreHook} from "@/store/modules/app";
+import useStore from "@/store";
 
-const language = computed(() => useAppStoreHook().language)
+const {app}=useStore()
+const language = computed(() => app.language)
 
 import {useI18n} from 'vue-i18n'
 import {ElMessage} from 'element-plus'
@@ -31,7 +32,7 @@ const {locale} = useI18n()
 
 function handleSetLanguage(lang: string) {
   locale.value = lang
-  useAppStoreHook().setLanguage(lang)
+  app.setLanguage(lang)
   if (lang == 'en') {
     ElMessage.success('Switch Language Successful!')
   } else {

src/components/RightPanel/index.vue

@@ -17,12 +17,15 @@
 import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue";
 
 import {addClass, removeClass} from '@/utils/index'
-import {useSettingStoreHook} from "@/store/modules/settings";
+
+import useStore from "@/store";
 
 // 图标依赖
 import {Close, Setting} from '@element-plus/icons-vue'
 import {ElColorPicker} from "element-plus";
 
+const {setting} =useStore()
+
 const props = defineProps({
   buttonTop: {
     default: 250,
@@ -30,7 +33,7 @@ const props = defineProps({
   }
 })
 
-const theme = computed(() => useSettingStoreHook().theme)
+const theme = computed(() =>setting.theme)
 
 const show = ref(false)
 

src/components/SizeSelect/index.vue

@@ -1,15 +1,16 @@
 <template>
   <el-dropdown class="size-select" trigger="click" @command="handleSetSize">
     <div class="size-select__icon">
-      <svg-icon class-name="size-icon" icon-class="size"/>
+      <svg-icon class-name="size-icon" icon-class="size" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item
-            v-for="item of sizeOptions"
-            :key="item.value"
-            :disabled="(size||'default')==item.value"
-            :command="item.value">
+          v-for="item of sizeOptions"
+          :key="item.value"
+          :disabled="(size || 'default') == item.value"
+          :command="item.value"
+        >
           {{ item.label }}
         </el-dropdown-item>
       </el-dropdown-menu>
@@ -18,29 +19,28 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-import {ref, computed} from "vue";
-import {useRoute, useRouter} from "vue-router"
+import { ElMessage } from "element-plus";
 
-import {ElMessage} from 'element-plus'
+import useStore from "@/store";
+import SvgIcon from "@/components/SvgIcon/index.vue";
 
-import {useAppStoreHook} from '@/store/modules/app'
-import SvgIcon from '@/components/SvgIcon/index.vue'
-
-const size = computed(() => useAppStoreHook().size)
+const { app } = useStore();
+const size = computed(() => app.size);
 
 const sizeOptions = ref([
-  {label: '默认', value: 'default'},
-  {label: '大型', value: 'large'},
-  {label: '小型', value: 'small'}
-])
+  { label: "默认", value: "default" },
+  { label: "大型", value: "large" },
+  { label: "小型", value: "small" },
+]);
 
 function handleSetSize(size: string) {
-  useAppStoreHook().setSize(size)
-  window.location.reload()
-  ElMessage.success('切换布局大小成功')
+  app.setSize(size);
+  window.location.reload();
+  ElMessage.success("切换布局大小成功");
 }
-
 </script>
 
 <style lang='scss' scoped>

src/components/ThemePicker/index.vue

@@ -9,8 +9,7 @@
 
 <script setup lang="ts">
 import {computed, nextTick, watch} from "vue";
-import {useSettingStoreHook} from "@/store/modules/settings";
-import {useTagsViewStoreHook} from "@/store/modules/tagsView";
+import useStore from "@/store";
 import {useRoute, useRouter} from "vue-router";
 import {localStorage} from "@/utils/storage";
 
@@ -23,7 +22,8 @@ const mixBlack = "#000000";
 
 const node = document.documentElement;
 
-const theme = computed(() => useSettingStoreHook().theme)
+const {setting} =useStore()
+const theme = computed(() => setting.theme)
 
 watch(theme, (color: string) => {
   node.style.setProperty("--el-color-primary", color);