🦄 refactor(store): setup 写法

(cherry picked from commit ada9ac3d88237e3c3ea9b0cbd8e070c33fe5b927)

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,
+  });

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;
+);

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,
+  },
+);