🦄 refactor(store): setup 写法

(cherry picked from commit ada9ac3d88237e3c3ea9b0cbd8e070c33fe5b927)
2025-12-12 09:18:14 +08:00 · 2023-04-06 16:22:03 +08:00
parent 0cdf2c80b9
commit 3001e40d4d
12 changed files with 229 additions and 247 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,7 +32,7 @@ import TBackTop from "./components/t-backTop.vue";
 // tauri
 import { fs, window, app } from "@tauri-apps/api";
 // store
-import useAppStore from "./store/modules/app";
+import { useAppStore } from "./store/modules/app";
 // utils
 import { InitTGData, DeleteTGData, WriteTGData } from "./utils/TGIndex";
 // data
@@ -53,7 +53,6 @@ onMounted(async () => {
 });

 async function checkLoad () {
-  await appStore.check();
  if (appStore.loading) {
    console.info("数据已加载！");
    return;
@@ -77,7 +76,7 @@ async function createDataDir () {
 async function writeData () {
  console.info("开始写入数据...");
  TGAppDataList.map(async (item) => {
-    await fs.writeFile(`${appStore.dataPath.app}\\${item.name}`, JSON.stringify(item.data));
+    await fs.writeFile(`${appStore.dataPath.appDataDir}\\${item.name}`, JSON.stringify(item.data));
  });
  console.info("数据写入完成！");
 }
--- a/src/components/t-pool.vue
+++ b/src/components/t-pool.vue
@@ -50,7 +50,7 @@
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 // store
-import useHomeStore from "../store/modules/home";
+import { useHomeStore } from "../store/modules/home";
 // utils
 import { createTGWindow } from "../utils/TGWindow";
 // plugins
--- a/src/components/t-sidebar.vue
+++ b/src/components/t-sidebar.vue
@@ -111,7 +111,7 @@
 // vue
 import { computed, ref } from "vue";
 // store
-import useAppStore from "../store/modules/app";
+import { useAppStore } from "../store/modules/app";

 const appStore = useAppStore();

--- a/src/pages/Achievements.vue
+++ b/src/pages/Achievements.vue
@@ -106,7 +106,7 @@ import TLoading from "../components/t-loading.vue";
 // tauri
 import { dialog, fs } from "@tauri-apps/api";
 // Store
-import useAchievementsStore from "../store/modules/achievements";
+import { useAchievementsStore } from "../store/modules/achievements";
 // Interface
 import { Achievements, UiafHeader, UiafAchievement } from "../plugins/UIAF/interface/UIAF";
 import { Achievement as TGAchievement, AchievementSeries as TGSeries } from "../interface/Achievements";
@@ -328,7 +328,7 @@ async function importJson () {
 // 导出
 async function exportJson () {
  // 判断是否有数据
-  if (achievementsStore.fin_achievements === 0) {
+  if (achievementsStore.finAchievements === 0) {
    snackbarText.value = "没有可导出的数据";
    snackbar.value = true;
    return;
--- a/src/pages/Announcements.vue
+++ b/src/pages/Announcements.vue
@@ -98,7 +98,7 @@ import GenshinOper from "../plugins/Genshin";
 import { createTGWindow } from "../utils/TGWindow";
 // interface
 import { AnnoListData, AnnoListCard } from "../plugins/Genshin/interface/announcement";
-import useAppStore from "../store/modules/app";
+import { useAppStore } from "../store/modules/app";

 // store
 const appStore = useAppStore();
--- a/src/pages/Config.vue
+++ b/src/pages/Config.vue
@@ -23,8 +23,7 @@
        <v-list-item-title>
          应用版本
          <v-btn
-            class="card-btn"
-            size="small"
+            class="card-btn" size="small"
            @click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
          >
            Alpha
@@ -39,7 +38,7 @@
          <img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements">
        </template>
        <template #append>
-          <v-list-item-subtitle>{{ achievementsStore.last_version }}</v-list-item-subtitle>
+          <v-list-item-subtitle>{{ achievementsStore.lastVersion }}</v-list-item-subtitle>
        </template>
      </v-list-item>
      <v-list-subheader inset class="config-header">
@@ -80,10 +79,7 @@
        </template>
        <template #append>
          <v-switch
-            v-model="appStore.devMode"
-            :label="appStore.devMode ? '开启' : '关闭'"
-            inset
-            color="#FAC51E"
+            v-model="appStore.devMode" :label="appStore.devMode ? '开启' : '关闭'" inset color="#FAC51E"
            @click="submitDevMode"
          />
        </template>
@@ -92,7 +88,7 @@
        <template #prepend>
          <v-icon>mdi-view-dashboard</v-icon>
        </template>
-        <v-select v-model="showHome" :items="homeStore.getShowItem()" label="首页显示组件" multiple chips />
+        <v-select v-model="showHome" :items="homeStore.getShowItems()" label="首页显示组件" multiple chips />
        <template #append>
          <v-btn class="card-btn" @click="submitHome">
            <template #prepend>
@@ -108,11 +104,11 @@
      <v-divider inset class="border-opacity-75" />
      <v-list-item prepend-icon="mdi-folder">
        <v-list-item-title>本地应用数据路径</v-list-item-title>
-        <v-list-item-subtitle>{{ appStore.dataPath.app }}</v-list-item-subtitle>
+        <v-list-item-subtitle>{{ appStore.dataPath.appDataDir }}</v-list-item-subtitle>
      </v-list-item>
      <v-list-item prepend-icon="mdi-folder">
        <v-list-item-title>本地用户数据路径</v-list-item-title>
-        <v-list-item-subtitle>{{ appStore.dataPath.user }}</v-list-item-subtitle>
+        <v-list-item-subtitle>{{ appStore.dataPath.userDataDir }}</v-list-item-subtitle>
      </v-list-item>
    </v-list>
    <!-- 弹窗提示条 -->
@@ -132,9 +128,9 @@ import TConfirm from "../components/t-confirm.vue";
 // tauri
 import { dialog, fs, app, os } from "@tauri-apps/api";
 // store
-import useAppStore from "../store/modules/app";
-import useHomeStore from "../store/modules/home";
-import useAchievementsStore from "../store/modules/achievements";
+import { useAppStore } from "../store/modules/app";
+import { useHomeStore } from "../store/modules/home";
+import { useAchievementsStore } from "../store/modules/achievements";
 // utils
 import { WriteTGData } from "../utils/TGIndex";
 // data
@@ -188,7 +184,7 @@ function toOuter (url: string) {
 // 打开用户数据目录
 async function openMergeData () {
  await dialog.open({
-    defaultPath: appStore.dataPath.user,
+    defaultPath: appStore.dataPath.userDataDir,
    filters: [],
  });
 }
@@ -263,7 +259,6 @@ async function delUserData () {

 // 恢复默认配置
 async function initAppData () {
-  await appStore.init();
  await homeStore.init();
  await achievementsStore.init();
  snackbarText.value = "已恢复默认配置!";
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -11,7 +11,7 @@ import TPool from "../components/t-pool.vue";
 import TPosition from "../components/t-position.vue";
 import TCalendar from "../components/t-calendar.vue";
 // store
-import useHomeStore from "../store/modules/home";
+import { useHomeStore } from "../store/modules/home";

 // store
 const homeStore = useHomeStore();
--- a/src/store/modules/achievements.ts
+++ b/src/store/modules/achievements.ts
@@ -2,43 +2,53 @@
 * @file store modules achievements.ts
 * @description Achievements store module
 * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha
+ * @since Alpha v0.1.2
 */

+// vue
+import { ref } from "vue";
+// pinia
 import { defineStore } from "pinia";

-const useAchievementsStore = defineStore({
-  id: "achievements",
-  state () {
+export const useAchievementsStore = defineStore(
+  "achievements", () => {
+    // 成就数据
+    const totalAchievements = ref(899);
+    const finAchievements = ref(0);
+    const lastVersion = ref("v3.5");
+    const UIAFVersion = ref("v1.1");
+    const title = ref("成就完成数：0/899 完成率：0%");
+
+    function init (): void {
+      totalAchievements.value = 899;
+      finAchievements.value = 0;
+      title.value = getTitle();
+    }
+
+    function getTitle (): string {
+      return `成就完成数：${finAchievements.value}/${totalAchievements.value} 完成率：${(
+        (finAchievements.value / totalAchievements.value) *
+        100
+      ).toFixed(2)}%`;
+    }
+
+    function flushData (total: number, fin: number): void {
+      totalAchievements.value = total;
+      finAchievements.value = fin;
+      title.value = getTitle();
+    }
+
    return {
-      total_achievements: 899,
-      fin_achievements: 0,
-      // 这个数据用于说明当前的数据版本，不会被渲染
-      last_version: "v3.5",
-      UIAF_Version: "v1.1",
-      // 显示用，避免重复计算
-      title: "成就完成数：0/899 完成率：0%",
+      totalAchievements,
+      finAchievements,
+      lastVersion,
+      UIAFVersion,
+      title,
+      init,
+      getTitle,
+      flushData,
    };
  },
-  actions: {
-    init () {
-      this.total_achievements = 899;
-      this.fin_achievements = 0;
-      this.title = this.getTitle();
-    },
-    flushData (total: number, fin: number) {
-      this.total_achievements = total;
-      this.fin_achievements = fin;
-      this.title = this.getTitle();
-    },
-    getTitle () {
-      return `成就完成数：${this.fin_achievements}/${this.total_achievements} 完成率：${(
-        (this.fin_achievements / this.total_achievements) *
-				100
-      ).toFixed(2)}%`;
-    },
-  },
-  persist: true,
-});
-
-export default useAchievementsStore;
+  {
+    persist: true,
+  });
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -2,10 +2,14 @@
 * @file store modules app.ts
 * @description App store module
 * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.1
+ * @since Alpha v0.1.2
 */

+// vue
+import { reactive, ref } from "vue";
+// pinia
 import { defineStore } from "pinia";
+// tauri
 import { path } from "@tauri-apps/api";

 // 用于存储原生数据的路径
@@ -15,108 +19,77 @@ const userDataDir = `${await path.appLocalDataDir()}userData`;
 // 用于各种临时数据的路径
 const tempDataDir = `${await path.appLocalDataDir()}tempData`;

-const useAppStore = defineStore({
-  id: "app",
-  state: () => {
-    return {
-      // 是否加载数据
-      loading: false,
-      // 侧边栏设置
-      sidebar: {
-        // 是否折叠
-        collapse: true,
-        // 是否显示
-        submenu: {
-          // 米游社
-          mihoyo: false,
-          // 数据库
-          database: false,
-        },
-      },
-      // 开发者模式
-      devMode: false,
-      // 数据路径
-      dataPath: {
-        app: appDataDir,
-        user: userDataDir,
-        temp: tempDataDir,
-      },
-      // 应用数据路径
-      appPath: {
-        achievements: `${appDataDir}\\achievements.json`,
-        achievementSeries: `${appDataDir}\\achievementSeries.json`,
-        nameCards: `${appDataDir}\\nameCards.json`,
+export const useAppStore = defineStore(
+  "app",
+  () => {
+    // 应用加载状态
+    const loading = ref(false);
+    // 侧边栏设置
+    const sidebar = reactive({
+      // 是否折叠
+      collapse: true,
+      // 是否显示
+      submenu: {
+        // 米游社
+        mihoyo: false,
+        // 数据库
+        database: false,
      },
+    });
+    // 开发者模式
+    const devMode = ref(false);
+
+    const dataPath = reactive({
+      appDataDir,
+      userDataDir,
+      tempDataDir,
+    });
+
+    // 应用数据路径
+    const appPath = ref({
+      achievements: `${dataPath.appDataDir}/achievements.json`,
+      achievementSeries: `${dataPath.appDataDir}/achievementSeries.json`,
+      nameCards: `${dataPath.appDataDir}/nameCards.json`,
+    });
      // 用户数据路径
-      userPath: {
-        achievements: `${userDataDir}\\achievements.json`,
-      },
+    const userPath = ref({
+      achievements: `${dataPath.userDataDir}/achievements.json`,
+    });
+
+    function getSubmenu (): string[] {
+      const open = [];
+      if (sidebar.submenu.database) open.push("database");
+      if (sidebar.submenu.mihoyo) open.push("mihoyo");
+      return open;
+    }
+
+    return {
+      loading,
+      sidebar,
+      devMode,
+      dataPath,
+      appPath,
+      userPath,
+      getSubmenu,
    };
  },
-  actions: {
-    // 检测 store 数据兼容，主要是 sideBar 数据
-    async check () {
-      if (this.sidebar === undefined) {
-        this.sidebar = {
-          collapse: true,
-          submenu: {
-            mihoyo: false,
-            database: false,
-          },
-        };
-      } else {
-        if (this.sidebar.collapse === undefined) this.sidebar.collapse = false;
-        if (this.sidebar.submenu === undefined) {
-          this.sidebar.submenu = { database: false, mihoyo: false };
-        }
-        if (this.sidebar.submenu.database === undefined) this.sidebar.submenu.database = false;
-        if (this.sidebar.submenu.mihoyo === undefined) this.sidebar.submenu.mihoyo = false;
-      }
-    },
-    // 初始化配置
-    async init () {
-      // 初始化侧边栏设置
-      this.sidebar = {
-        collapse: false,
-        submenu: {
-          mihoyo: false,
-          database: false,
-        },
-      };
-      // 初始化加载状态
-      this.loading = false;
-      // 初始化开发者模式
-      this.devMode = false;
-      // 初始化用户数据路径
-      this.userPath = {
-        achievements: `${userDataDir}\\achievements.json`,
-      };
-    },
-    // 获取折叠
-    getSubmenu () {
-      const open = [];
-      if (this.sidebar.submenu.database) open.push("database");
-      if (this.sidebar.submenu.mihoyo) open.push("mihoyo");
-      return open;
-    },
+  {
+    persist: [
+      {
+        key: "appPath",
+        storage: window.localStorage,
+        paths: ["dataPath", "appPath", "userPath"],
+      },
+      {
+        key: "app",
+        storage: window.localStorage,
+        paths: ["devMode", "loading"],
+      },
+      {
+        key: "sidebar",
+        storage: window.localStorage,
+        paths: ["sidebar"],
+      },
+    ],
  },
-  persist: [
-    {
-      key: "appPath",
-      storage: window.localStorage,
-      paths: ["dataPath", "appPath", "userPath"],
-    },
-    {
-      key: "app",
-      storage: window.localStorage,
-      paths: ["devMode", "loading"],
-    },
-    {
-      key: "sidebar",
-      storage: window.localStorage,
-      paths: ["sidebar"],
-    },
-  ],
-});
-
-export default useAppStore;
+);
--- a/src/store/modules/home.ts
+++ b/src/store/modules/home.ts
@@ -5,121 +5,126 @@
 * @since Alpha v0.1.2
 */

+// vue
+import { ref } from "vue";
+// pinia
 import { defineStore } from "pinia";
+// interface
 import { type Map } from "../../interface/Base";

-const useHomeStore = defineStore({
-  id: "home",
-  state: () => {
-    return {
-      calendar: {
+export const useHomeStore = defineStore(
+  "home", () => {
+    const calendarShow = ref({
+      show: true,
+      order: 3,
+    });
+    const poolShow = ref({
+      show: true,
+      order: 1,
+    });
+    const positionShow = ref({
+      show: true,
+      order: 2,
+    });
+    const hoemShow = ref({
+      calendarShow,
+      poolShow,
+      positionShow,
+    });
+    const poolCover = ref({} satisfies Map<string>);
+
+    function init (): void {
+      calendarShow.value = {
        show: true,
        order: 3,
-      },
-      pool: {
+      };
+      poolShow.value = {
        show: true,
        order: 1,
-      },
-      position: {
+      };
+      positionShow.value = {
        show: true,
        order: 2,
-      },
-      poolCover: {} satisfies Map<string>,
-    };
-  },
-  actions: {
-    async init () {
-      this.$state = {
-        calendar: {
-          show: true,
-          order: 3,
-        },
-        pool: {
-          show: true,
-          order: 1,
-        },
-        position: {
-          show: true,
-          order: 2,
-        },
-        poolCover: {},
      };
-    },
-    getShowItem () {
+      poolCover.value = {};
+    }
+
+    function getShowItems (): string[] {
      const defaultList = ["素材日历", "限时祈愿", "近期活动"];
      defaultList.sort((a, b) => {
-        return this.getItemOrder(a) - this.getItemOrder(b);
+        return getItemOrder(a) - getItemOrder(b);
      });
      return defaultList;
-    },
-    getShowValue () {
+    }
+
+    function getShowValue (): string[] {
      const showValue = [];
-      if (this.calendar.show) showValue.push("素材日历");
-      if (this.pool.show) showValue.push("限时祈愿");
-      if (this.position.show) showValue.push("近期活动");
+      if (calendarShow.value.show) showValue.push("素材日历");
+      if (poolShow.value.show) showValue.push("限时祈愿");
+      if (positionShow.value.show) showValue.push("近期活动");
      showValue.sort((a, b) => {
-        return this.getItemOrder(a) - this.getItemOrder(b);
+        return getItemOrder(a) - getItemOrder(b);
      });
      return showValue;
-    },
-    getItemOrder (item: string) {
-      switch (item) {
-        case "素材日历":
-          return this.calendar.order;
-        case "限时祈愿":
-          return this.pool.order;
-        case "近期活动":
-          return this.position.order;
-        default:
-          return 4;
-      }
-    },
-    setShowValue (value: string[]) {
+    }
+
+    function getItemOrder (item: string): number {
+      if (item === "素材日历") return calendarShow.value.order;
+      if (item === "限时祈愿") return poolShow.value.order;
+      if (item === "近期活动") return positionShow.value.order;
+      return 4;
+    }
+
+    function setShowValue (value: string[]): void {
      let order = 1;
      // 遍历 value
      value.forEach((item) => {
-        if (!this.getShowItem().includes(item)) {
+        if (!getShowItems().includes(item)) {
          throw new Error("传入的值不在可选范围内");
        }
-        switch (item) {
-          case "素材日历":
-            this.calendar.order = order;
-            this.calendar.show = true;
-            order++;
-            break;
-          case "限时祈愿":
-            this.pool.order = order;
-            this.pool.show = true;
-            order++;
-            break;
-          case "近期活动":
-            this.position.order = order;
-            this.position.show = true;
-            order++;
-            break;
-          default:
-            break;
-        }
-        // 没有显示的 item
-        if (!value.includes("素材日历")) {
-          this.calendar.show = false;
-          this.calendar.order = order;
+        if (item === "素材日历") {
+          calendarShow.value.order = order;
+          calendarShow.value.show = true;
          order++;
        }
-        if (!value.includes("限时祈愿")) {
-          this.pool.show = false;
-          this.pool.order = order;
+        if (item === "限时祈愿") {
+          poolShow.value.order = order;
+          poolShow.value.show = true;
          order++;
        }
-        if (!value.includes("近期活动")) {
-          this.position.show = false;
-          this.position.order = order;
+        if (item === "近期活动") {
+          positionShow.value.order = order;
+          positionShow.value.show = true;
          order++;
        }
      });
-    },
-  },
-  persist: true,
-});
+      // 遍历 getShowItems()
+      getShowItems().forEach((item) => {
+        if (!value.includes(item)) {
+          if (item === "素材日历") {
+            calendarShow.value.show = false;
+          }
+          if (item === "限时祈愿") {
+            poolShow.value.show = false;
+          }
+          if (item === "近期活动") {
+            positionShow.value.show = false;
+          }
+        }
+      });
+    }

-export default useHomeStore;
+    return {
+      hoemShow,
+      poolCover,
+      init,
+      getShowItems,
+      getShowValue,
+      setShowValue,
+    };
+  }
+  ,
+  {
+    persist: true,
+  },
+);
--- a/src/views/t-lottery.vue
+++ b/src/views/t-lottery.vue
@@ -74,7 +74,7 @@ import TLoading from "../components/t-loading.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // store
-import useAppStore from "../store/modules/app";
+import { useAppStore } from "../store/modules/app";
 // plugins
 import MysOper from "../plugins/Mys";
 // interface
--- a/src/views/t-news.vue
+++ b/src/views/t-news.vue
@@ -146,7 +146,7 @@ import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import TLoading from "../components/t-loading.vue";
 // store
-import useAppStore from "../store/modules/app";
+import { useAppStore } from "../store/modules/app";
 // plugin
 import MysOper from "../plugins/Mys";
 // utils