Merge pull request #139 from j10ccc/refactor/general-service

refactor(store): 使用 pinia 重构 system 和 service store

src/hooks/lostfound/useLostFoundList.ts

@@ -0,0 +1,9 @@
+type OptionsType = {
+  campus: "屏峰" | "朝晖" | "莫干山";
+  category: "全部" | "失物" | "寻物",
+  kind: "全部" | string;
+};
+
+export default function useLostFoundList(options: OptionsType) {
+
+}

src/services/services/userService.ts

@@ -1,12 +1,13 @@
 import Taro from "@tarojs/taro";
-import store, { serviceStore } from "@/store";
+import { useServiceStore } from "@/store";
 import { FetchResult, fetch } from "@/utils";
 import { api } from "@/services";
 import { updateDateStateWithSession } from "../utils/updateDateState";
 import errCodeHandler from "../utils/errHandler";
 import { ServerCode } from "../api/codes";
 import request from "../request";
 
+const serviceStore = useServiceStore();
 export default class UserService {
   static getUserTheme = () => {
     return request<{
@@ -135,7 +136,7 @@ export default class UserService {
     const res = await fetch.post(api.user.create.wechat, userForm);
     if (res.statusCode === 200 && res.data.code === ServerCode.OK) {
       if (res.cookies && res.cookies.length > 0) {
-        store.commit("setSession", res.cookies[0]);
+        serviceStore.setSession(res.cookies[0]);
         UserService.getUserInfo();
       }
       return true;
@@ -157,7 +158,7 @@ export default class UserService {
     const res = await fetch.post(api.user.create.h5, userForm);
     if (res.statusCode === 200) {
       if (res.cookies && res.cookies.length > 0) {
-        store.commit("setSession", res.cookies[0]);
+        serviceStore.setSession(res.cookies[0]);
         UserService.getUserInfo();
       }
       return true;

src/services/services/yxyService.ts

@@ -1,8 +1,9 @@
-import { api } from "../api/apiList";
-import { serviceStore } from "@/store";
+import { api } from "@/services";
 import request from "../request";
 import Taro from "@tarojs/taro";
+import { useServiceStore } from "@/store";
 
+const serviceStore = useServiceStore();
 export default class YxyService {
 
   /**

src/services/services/zfService.ts

@@ -1,12 +1,15 @@
 import { updateDateStateWithSession } from "../utils/updateDateState";
 import { api } from "../api/apiList";
-import { serviceStore, systemStore } from "@/store";
+import { useServiceStore, useSystemStore } from "@/store";
 import { Lesson, PracticeLesson } from "@/types/Lesson";
 import { Exam } from "@/types/Exam";
 import { Score } from "@/types/Score";
+
+const serviceStore = useServiceStore();
+const systemStore = useSystemStore();
 export default class ZFService {
   static async updateLessonTable(data?: { year: string; term: string }) {
-    if (!data) {
+    if (!data && systemStore.generalInfo) {
       data = {
         year: systemStore.generalInfo.termYear,
         term: systemStore.generalInfo.term

src/store/index.ts

@@ -1,27 +1,12 @@
-import { createStore } from "vuex";
-import createPersistedState from "vuex-persistedstate";
-import { ServiceStoreType, ServiceStore } from "./service";
-import { SystemStoreType, SystemStore } from "./system";
-import { persistedStateStorage } from "../utils/storage";
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import { useSystemStore } from "./system";
+import { useServiceStore } from "./service";
 
-interface StoreType {
-  service: ServiceStoreType;
-  system: SystemStoreType;
-}
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
-const store = createStore<StoreType>({
-  modules: {
-    service: ServiceStore,
-    system: SystemStore
-  },
-  plugins: [
-    createPersistedState({
-      storage: persistedStateStorage
-    })
-  ]
-});
-const serviceStore = store.state.service;
-const systemStore = store.state.system;
-
-export default store;
-export { serviceStore, systemStore };
+export {
+  useSystemStore,
+  useServiceStore
+};

src/store/service/announcement.ts

@@ -1,28 +1,35 @@
 import { Announcement } from "src/types/Announcement";
+import { defineStore } from "pinia";
+import { ref } from "vue";
 
 export interface AnnouncementType {
   announcements: Announcement[];
   updateCounter: number;
 }
 
-export const AnnouncementStore = {
-  state: () => ({
-    announcements: [],
-    updateCounter: 0
-  }),
-  mutations: {
-    setAnnouncements(state: AnnouncementType, value: Announcement[]) {
-      if (state.announcements.length != value.length)
-        state.updateCounter = Math.abs(
-          value.length - state.announcements.length
-        );
-      state.announcements = value;
-    },
-    clearAnnouncements(state: AnnouncementType) {
-      state.announcements = [];
-    },
-    clearAnnouncementsUpdateCounter(state: AnnouncementType) {
-      state.updateCounter = 0;
-    }
-  }
-};
+export const useAnnouncementStore = defineStore("announcement", () => {
+  const announcements = ref<Announcement[]>();
+  const updateCounter = ref(0);
+
+  const setAnnouncements = (value: Announcement[]) => {
+    if (announcements.value?.length != value.length)
+      updateCounter.value = Math.abs(
+        value.length - announcements.value!.length
+      );
+    announcements.value = value;
+  };
+  const clearAnnouncements = () => {
+    announcements.value = [];
+  };
+  const clearAnnouncementsUpdateCounter = () => {
+    updateCounter.value = 0;
+  };
+  return {
+    announcements,
+    updateCounter,
+    setAnnouncements,
+    clearAnnouncements,
+    clearAnnouncementsUpdateCounter
+  };
+});
+

src/store/service/card.ts

@@ -1,37 +1,54 @@
 import { CardConsume } from "@/types/CardConsume";
+import { ref } from "vue";
+import { defineStore } from "pinia";
 
 export interface CardServiceType {
   balance?: number;
   today: CardConsume[];
+  history: CardConsume[];
   updateTime: {
     today?: Date;
+    history?: Date;
     balance?: Date;
   };
 }
-export const CardServiceStore = {
-  state: () => ({
-    balance: 0,
-    history: [],
-    today: [],
-    updateTime: {
-      balance: undefined,
-      history: undefined,
-      today: undefined
-    }
-  }),
 
-  mutations: {
-    setCardBalance(state: CardServiceType, value: number) {
-      state.balance = value;
-      state.updateTime.balance = new Date();
-    },
-    setCardToday(state: CardServiceType, value: CardConsume[]) {
-      if (value !== null) state.today = value;
-      else state.today = [];
-      state.updateTime.today = new Date();
-    },
-    clearCardToday(state: CardServiceType) {
-      state.today = [];
-    }
-  }
-};
+export const useCardServiceStore = defineStore("card", () => {
+  const balance = ref<number>();
+  const history = ref<CardConsume[]>([]);
+  const today = ref<CardConsume[]>([]);
+  const updateTime = ref<{
+    balance?: Date;
+    history?: Date;
+    today?: Date;
+  }>({
+    balance: undefined,
+    history: undefined,
+    today: undefined
+  });
+
+  const setCardBalance = (value: number) => {
+    balance.value = value;
+    updateTime.value.balance = new Date();
+  };
+
+  const setCardToday = (value: CardConsume[]) => {
+    if (value !== null) today.value = value;
+    else today.value = [];
+    updateTime.value.today = new Date();
+  };
+
+  const clearCardToday = () => {
+    today.value = [];
+  };
+
+  return {
+    balance,
+    history,
+    today,
+    updateTime,
+    setCardBalance,
+    setCardToday,
+    clearCardToday
+  };
+});

src/store/service/index.ts

@@ -1,19 +1,18 @@
-import { CardServiceStore, CardServiceType } from "./card";
-import { UserServiceStore, UserType } from "./user";
-import { LibraryServiceStore } from "./library";
-import { ZFServiceStore, ZFServiceType } from "./zf";
+import { CardServiceType } from "./card";
+import { UserType } from "./user";
+import { useZFServiceStore, ZFServiceType } from "./zf";
 import { BorrowBooksInfo } from "@/types/BorrowBooksInfo";
-import { AnnouncementStore, AnnouncementType } from "./announcement";
-import { InformationStore, InformationStoreType } from "./information";
+import { AnnouncementType } from "./announcement";
+import { InformationStoreType } from "./information";
 import { AppListItem } from "@/types/AppList";
-import { ScoreServiceStore } from "./score";
-import { HomeCardServiceStore, HomeCardServiceType } from "./homecard";
-import { ElectricityServiceStore } from "./electricity";
-import { WebviewStore, WebviewStoreType } from "./webview";
-import { LostfoundStore, LostfoundStoreType } from "./lostfound";
-import { NotificationStore, NotificationStoreType } from "./notification";
-import { ThemeStore, ThemeStoreType } from "./theme";
-import { SuitStore, SuitStoreType } from "./suit";
+import { HomeCardServiceType } from "./homecard";
+import { WebviewStoreType } from "./webview";
+import { LostfoundStoreType } from "./lostfound";
+import { NotificationStoreType } from "./notification";
+import { ThemeStoreType } from "./theme";
+import { SuitStoreType } from "./suit";
+import { defineStore } from "pinia";
+import { ref } from "vue";
 
 export interface ServiceStoreType {
   appList?: AppListItem[];
@@ -47,45 +46,38 @@ export interface ServiceStoreType {
     updateTime: { history: string; current: string };
   };
   zf: ZFServiceType;
-  lostfound: LostfoundStoreType;
-  homecard: HomeCardServiceType;
+  lostFound: LostfoundStoreType;
+  homeCard: HomeCardServiceType;
   notification: NotificationStoreType;
   theme: ThemeStoreType;
   suit: SuitStoreType;
 }
 
-export const ServiceStore = {
-  modules: {
-    card: CardServiceStore,
-    user: UserServiceStore,
-    webview: WebviewStore,
-    library: LibraryServiceStore,
-    zf: ZFServiceStore,
-    announcement: AnnouncementStore,
-    information: InformationStore,
-    score: ScoreServiceStore,
-    homecard: HomeCardServiceStore,
-    electricity: ElectricityServiceStore,
-    lostfound: LostfoundStore,
-    notification: NotificationStore,
-    theme: ThemeStore,
-    suit: SuitStore
-  },
-  state: () => ({
-    sessionID: undefined
-  }),
-  mutations: {
-    setSession(state: ServiceStoreType, value) {
-      state.sessionID = value;
-    },
-    clearSession(state: ServiceStoreType) {
-      state.sessionID = undefined;
-    },
-    setApplist(state: ServiceStoreType, value) {
-      state.appList = value;
-    },
-    clearApplist(state: ServiceStoreType) {
-      state.appList = undefined;
-    }
-  }
-};
+export const useServiceStore = defineStore("service", () => {
+  const sessionID = ref<string | undefined>(undefined);
+  const appList = ref<AppListItem[]>();
+  const zf = useZFServiceStore();
+  const score = useServiceStore();
+  const setSession = (value: string) => {
+    sessionID.value = value;
+  };
+  const cleanSession = () => {
+    sessionID.value = undefined;
+  };
+  const setAppList = (value: AppListItem[]) => {
+    appList.value = value;
+  };
+  const clearAppList = () => {
+    appList.value = undefined;
+  };
+  return {
+    sessionID,
+    appList,
+    zf,
+    score,
+    setSession,
+    cleanSession,
+    setAppList,
+    clearAppList
+  };
+});

src/store/service/score.ts

@@ -1,54 +1,48 @@
 import { Score } from "@/types/Score";
-import { ServiceStoreType } from ".";
+import { ref } from "vue";
+import { defineStore } from "pinia";
 
-type ScoreServiceStoreType = ServiceStoreType["score"];
+export const useScoreServiceStore = defineStore("score", () => {
+  const readScoreMarks = ref();
+  const findNewScoresTime = ref();
+  const scorePeriod = ref("期末");
 
-export const ScoreServiceStore = {
-  state: {
-    readScoreMarks: [], // 所有已读成绩的标记
-    findNewScoresTime: undefined,
-    scorePeriod: "期末" // 记录当前成绩页面选中的期中/期末
-  },
+  /**
+   * 拆入已读成绩
+   * 提取成标记存入数组
+   * @param state
+   * @param value 成绩
+   */
+  const insertReadScore = (value: Score) => {
+    readScoreMarks.value.push({
+      name: value.lessonID,
+      scorePoint: value.scorePoint,
+      val: true
+    });
+  };
+  /**
+   * 发现新出成绩之后的操作
+   * - 标记时间
+   * @param state
+   */
+  const findNewScore = () => {
+    findNewScoresTime.value = new Date();
+  };
 
-  mutations: {
-
-    /**
-     * 拆入已读成绩
-     * 提取成标记存入数组
-     * @param state
-     * @param value 成绩
-     */
-    insertReadScore(
-      state: ScoreServiceStoreType,
-      value: Score
-    ) {
-      state.readScoreMarks.push({
-        name: value.lessonID,
-        scorePoint: value.scorePoint,
-        val: true
-      });
-    },
-
-    /**
-     * 发现新出成绩之后的操作
-     * - 标记时间
-     * @param state
-     */
-    findNewScore(state: ScoreServiceStoreType) {
-      state.findNewScoresTime = new Date();
-    },
-
-    /**
-     * 更新当前选中的成绩时期（期中/期末）
-     * @param state
-     * @param value 更新的period
-     */
-    changeScorePeriod(
-      state: ScoreServiceStoreType,
-      value: "期中" | "期末"
-    ) {
-      state.scorePeriod = value;
-    }
-
-  }
-};
+  /**
+   * 更新当前选中的成绩时期（期中/期末）
+   * @param state
+   * @param value 更新的period
+   */
+  const changeScorePeriod = (value: "期中" | "期末") => {
+    scorePeriod.value = value;
+  };
+  return {
+    readScoreMarks,
+    findNewScoresTime,
+    scorePeriod,
+    insertReadScore,
+    findNewScore,
+    changeScorePeriod
+  };
+});

src/store/service/user.ts

@@ -1,3 +1,6 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
 export interface UserType {
   info?: {
     studentID: string;
@@ -12,57 +15,67 @@ export interface UserType {
   isBindYXY: boolean;
   isBindOauth: boolean;
 }
-export const UserServiceStore = {
-  state: () => ({
-    info: undefined,
-    isActive: false,
-    isBindZF: false,
-    isBindLibrary: false,
-    isBindYXY: false,
-    isBindOauth: false
-  }),
-  mutations: {
-    setBindZF(state: UserType, value: boolean) {
-      state.isBindZF = value;
-    },
-    setBindLibrary(state: UserType, value: boolean) {
-      state.isBindLibrary = value;
-    },
-    setBindYXY(state: UserType, value: boolean) {
-      state.isBindYXY = value;
-    },
-    setBindOauth(state: UserType, value: boolean) {
-      state.isBindOauth = value;
-    },
-    // comment: 设置用户信息
-    setUserInfo(
-      state: UserType,
-      value: {
-        studentID: string;
-        bind: { zf: boolean; lib: boolean, yxy: boolean, oauth: boolean };
-      }
-    ) {
-      state.info = { studentID: value.studentID };
-      state.isBindZF = value.bind.zf;
-      state.isBindLibrary = value.bind.lib;
-      state.isBindYXY = value.bind.yxy;
-      state.isBindOauth = value.bind.oauth;
-      state.isActive = true;
-    },
-    setUserWXProfile(
-      state: UserType,
-      value: { avatarUrl: string; nickName: string }
-    ) {
-      state.wxProfile = value;
-    },
-    // comment: 删除用户信息
-    clearUserInfo(state: UserType) {
-      state.info = undefined;
-      state.isActive = false;
-      state.isBindZF = false;
-      state.isBindLibrary = false;
-      state.isBindYXY = false;
-      state.isBindOauth = false;
-    }
-  }
-};
+
+export const useUserStore = defineStore("user", () => {
+  const info = ref<UserType["info"]>(undefined);
+  const isActive = ref(false);
+  const isBindZF = ref(false);
+  const isBindLibrary = ref(false);
+  const isBindYXY = ref(false);
+  const isBindOauth = ref(false);
+  const wxProfile = ref<UserType["wxProfile"]>();
+
+  const setBindZF = (value: boolean) => {
+    isBindZF.value = value;
+  };
+
+  const setBindLibrary = (value: boolean) => {
+    isBindLibrary.value = value;
+  };
+  const setBindYXY = (value: boolean) => {
+    isBindYXY.value = value;
+  };
+  const setBindOauth = (value: boolean) => {
+    isBindOauth.value = value;
+  };
+  const setUserInfo = (value: {
+    studentID: string;
+    bind: { zf: boolean; lib: boolean, yxy: boolean, oauth: boolean };
+  }) => {
+    info.value = { studentID: value.studentID };
+    isBindZF.value = value.bind.zf;
+    isBindLibrary.value = value.bind.lib;
+    isBindYXY.value = value.bind.yxy;
+    isBindOauth.value = value.bind.oauth;
+    isActive.value = true;
+  };
+
+  const setUserWXProfile = (value: { avatarUrl: string; nickName: string }) => {
+    wxProfile.value = value;
+  };
+  const clearUserInfo = () => {
+    info.value = undefined;
+    isActive.value = false;
+    setBindZF(false);
+    setBindLibrary(false);
+    setBindYXY(false);
+    setBindOauth(false);
+  };
+
+  return {
+    info,
+    isActive,
+    isBindZF,
+    isBindLibrary,
+    isBindYXY,
+    isBindOauth,
+    wxProfile,
+    setUserInfo,
+    setUserWXProfile,
+    clearUserInfo,
+    setBindZF,
+    setBindLibrary,
+    setBindYXY,
+    setBindOauth
+  };
+});

src/store/service/zf.ts

@@ -2,6 +2,8 @@ import { Exam } from "@/types/Exam";
 import { Lesson, PracticeLesson } from "@/types/Lesson";
 import { Room } from "@/types/Room";
 import { Score } from "@/types/Score";
+import { ref } from "vue";
+import { defineStore } from "pinia";
 
 export interface ZFServiceType {
   lessonsTableInfo: {
@@ -39,70 +41,80 @@ export interface ZFServiceType {
   };
 }
 
-export const ZFServiceStore = {
-  state: () => ({
-    lessonsTableInfo: {},
-    practiceLessons: [],
-    examInfo: {},
-    scoreInfo: {},
-    roomInfo: {}
-  }),
-  mutations: {
-    setLessonTable(
-      state: ZFServiceType,
-      value: {
-        term: string;
-        year: string;
-        lessonsTable: Lesson[];
-        practiceLessons: PracticeLesson[];
-      }
-    ) {
-      if (!value.lessonsTable) {
-        console.error("更新课表失败");
-        return;
-      }
-      if (!state.lessonsTableInfo[value.year])
-        state.lessonsTableInfo[value.year] = {};
-      state.lessonsTableInfo[value.year][value.term] = {
-        data: {
-          lessonsTable: value.lessonsTable,
-          practiceLessons: value.practiceLessons
-        },
-        updateTime: new Date()
-      };
-    },
-    setExamInfo(
-      state: ZFServiceType,
-      value: { term: string; year: string; examInfo: Exam[] }
-    ) {
-      if (!state.examInfo[value.year]) state.examInfo[value.year] = {};
-      state.examInfo[value.year][value.term] = {
+export const useZFServiceStore = defineStore("zf", () => {
+  const lessonsTableInfo = ref();
+  const practiceLessons = ref();
+  const examInfo = ref();
+  const scoreInfo = ref();
+  const roomInfo = ref();
+
+  const setLessonTable = (
+    value: {
+      term: string;
+      year: string;
+      lessonsTable: Lesson[];
+      practiceLessons: PracticeLesson[];
+    }
+  ) => {
+    if (!value.lessonsTable) {
+      console.error("更新课表失败");
+      return;
+    }
+    if (!lessonsTableInfo.value) lessonsTableInfo.value = {};
+    if (!lessonsTableInfo.value[value.year])
+      lessonsTableInfo.value[value.year] = {};
+    lessonsTableInfo.value[value.year][value.term] = {
+      data: {
+        lessonsTable: value.lessonsTable,
+        practiceLessons: value.practiceLessons
+      },
+      updateTime: new Date()
+    };
+  };
+
+  const setExamInfo = (value: { term: string; year: string; examInfo: Exam[] }) => {
+    if (examInfo.value && !examInfo.value[value.year]) examInfo.value[value.year] = {};
+    if (examInfo.value) {
+      examInfo.value[value.year][value.term] = {
         data: value.examInfo,
         updateTime: new Date()
       };
-    },
-    setScoreInfo(
-      state: ZFServiceType,
-      value: { term: string; year: string; period: "期中" | "期末"; scoreInfo: Score[] }
-    ) {
+    }
+  };
+
+  const setScoreInfo = (value: { term: string; year: string; period: "期中" | "期末"; scoreInfo: Score[] }) => {
+    if (scoreInfo.value) {
       if (!value.scoreInfo) return;
-      if (!state.scoreInfo[value.year])
-        state.scoreInfo[value.year] = {};
-      if (!state.scoreInfo[value.year][value.term])
-        state.scoreInfo[value.year][value.term] = {};
-      state.scoreInfo[value.year][value.term][value.period] = {
+      if (!scoreInfo.value[value.year])
+        scoreInfo.value[value.year] = {};
+      if (!scoreInfo.value[value.year][value.term])
+        scoreInfo.value[value.year][value.term] = {};
+      scoreInfo.value[value.year][value.term][value.period] = {
         data: value.scoreInfo.map(item => ({
           ...item,
           scorePeriod: value.period
         })),
         updateTime: new Date()
       };
-    },
-    setRoomInfo(state: ZFServiceType, value: []) {
-      state.roomInfo = {
-        data: value,
-        updateTime: new Date()
-      };
     }
-  }
-};
+  };
+
+  const setRoomInfo = (value: Room[]) => {
+    roomInfo.value = {
+      data: value,
+      updateTime: new Date()
+    };
+  };
+
+  return {
+    lessonsTableInfo,
+    practiceLessons,
+    examInfo,
+    scoreInfo,
+    roomInfo,
+    setLessonTable,
+    setExamInfo,
+    setScoreInfo,
+    setRoomInfo
+  };
+});

src/store/system/index.ts

@@ -1,6 +1,9 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { persistedStateStorage } from "../../utils/storage";
+
 export interface SystemStoreType {
   loading: boolean;
-
   generalInfo: {
     is_begin: boolean;
     schoolBusUrl: string;
@@ -20,34 +23,39 @@ export interface SystemStoreType {
   };
 }
 
-export const SystemStore = {
-  state: () => ({
-    loading: false,
-    generalInfo: {},
-    version: "",
-    questionnaire: {}
-  }),
-  mutations: {
-    startLoading(state: SystemStoreType) {
-      state.loading = true;
-    },
-    stopLoading(state: SystemStoreType) {
-      state.loading = false;
-    },
-    setGeneralInfo(
-      state: SystemStoreType,
-      value: SystemStoreType["generalInfo"]
-    ) {
-      state.generalInfo = value;
-    },
-    setVersion(state: SystemStoreType, value: string) {
-      state.version = value;
-    },
-    setQuestionnaire(
-      state: SystemStoreType,
-      value: SystemStoreType["questionnaire"]
-    ) {
-      state.questionnaire = value;
-    }
-  }
-};
+export const useSystemStore = defineStore("system", () => {
+  const loading = ref(false);
+  const generalInfo = ref();
+  const version = ref("");
+  const questionnaire = ref<SystemStoreType["questionnaire"]>();
+
+  const startLoading = () => {
+    loading.value = true;
+  };
+  const stopLoading = () => {
+    loading.value = false;
+  };
+  const setGeneralInfo = (value: SystemStoreType["generalInfo"]) => {
+    generalInfo.value = value;
+  };
+  const setVersion = (value: string) => {
+    version.value = value;
+  };
+  const setQuestionnaire = (value: SystemStoreType["questionnaire"]) => {
+    questionnaire.value = value;
+  };
+  return {
+    loading,
+    generalInfo,
+    version,
+    questionnaire,
+    startLoading,
+    stopLoading,
+    setGeneralInfo,
+    setVersion,
+    setQuestionnaire
+  };
+}, {
+  persist: {
+    storage: persistedStateStorage
+  } });