状态管理从 vuex 迁移至 pinia

.github/workflows/node.js.yml

@@ -43,8 +43,8 @@ jobs:
         run: |
           echo "${{ secrets.ENV_FILE }}" > .env
 
-      - name: Lint project
-        run: pnpm lint
+      - name: Lint and check type
+        run: pnpm lint && pnpm typecheck
 
       - name: Build Taro weapp
         run: pnpm build:weapp

package.json

@@ -5,6 +5,7 @@
   "author": "ZJUTJH",
   "scripts": {
     "lint": "eslint",
+    "typecheck": "vue-tsc --noEmit",
     "dev:weapp": "npm run build:weapp -- --watch",
     "build:weapp": "taro build --type weapp"
   },
@@ -16,37 +17,40 @@
     "@babel/runtime": "^7.24.4",
     "@tarojs/components": "4.0.6",
     "@tarojs/helper": "4.0.6",
+    "@tarojs/plugin-framework-vue3": "4.0.6",
     "@tarojs/plugin-platform-weapp": "4.0.6",
     "@tarojs/runtime": "4.0.6",
     "@tarojs/shared": "4.0.6",
     "@tarojs/taro": "4.0.6",
-    "@tarojs/plugin-framework-vue3": "4.0.6",
+    "@vueuse/core": "^11.2.0",
     "dayjs": "^1.11.4",
     "lodash-es": "^4.17.21",
-    "vue": "^3.0.0",
-    "vuex": "^4.0.0",
-    "vuex-persistedstate": "^4.1.0"
+    "pinia": "^2.2.4",
+    "pinia-plugin-persistedstate": "^4.1.1",
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@babel/plugin-proposal-class-properties": "7.14.5",
+    "@stylistic/eslint-plugin": "^2.9.0",
     "@tarojs/cli": "4.0.6",
     "@tarojs/vite-runner": "4.0.6",
-    "@stylistic/eslint-plugin": "^2.9.0",
-    "@vue/eslint-config-typescript": "^14.0.0",
-    "babel-preset-taro": "4.0.6",
-    "terser": "^5.30.4",
-    "vite": "^4.2.0",
+    "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/eslint-config-typescript": "^14.0.0",
+    "babel-preset-taro": "4.0.6",
     "eslint": "^9.12.0",
-    "stylelint": "^14.4.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-vue": "^9.28.0",
     "globals": "^15.11.0",
+    "postcss": "^8.4.38",
     "sass": "^1.75.0",
+    "stylelint": "^14.4.0",
+    "terser": "^5.30.4",
     "typescript": "^5.4.5",
-    "postcss": "^8.4.38"
+    "vite": "^4.2.0",
+    "vue-tsc": "^2.1.10"
   }
 }

src/app.config.ts

@@ -18,7 +18,6 @@ export default defineAppConfig({
     "pages/connect/faq/index",
     "pages/theme/index",
     "pages/freeroom/index",
-    "pages/canteenflow/index",
     "pages/announcement/index",
     "pages/electricity/index",
     "pages/electricity/record/index",

src/app.ts

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
-import store from "./store/index";
-import { LoginByTaro, SystemService } from "./services";
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
 import dayjs from "dayjs";
@@ -13,12 +13,11 @@ dayjs.extend(customParseFormat);
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
 
-const App = createApp({
-  mounted() {
-    SystemService.getGeneralInfo();
-    SystemService.getAppList();
-    LoginByTaro();
-  }
-}).use(store);
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+const App = createApp({});
+
+App.use(pinia);
 
 export default App;

src/components/AppList/AppListItem/index.vue

@@ -10,24 +10,25 @@
 </template>
 
 <script setup lang="ts">
-import { serviceStore } from "@/store";
 import Taro from "@tarojs/taro";
-import { computed, ref, toRefs } from "vue";
+import { computed } from "vue";
 import "./index.scss";
+import useThemeStore from "@/store/service/theme";
 
 const props = defineProps<{
   label: string,
   icon: string,
-  url: string,
   bg: string,
-  require: string,
+  url: string,
+  disabled: boolean
 }>();
-const { require: requireActive, bg = ref("green"), label, url } = toRefs(props);
+
+const themeStore = useThemeStore();
+
 // 主题过渡方案
 const icon = props.icon;
-const themeMode = computed(() => serviceStore.theme.themeMode);
 const iconClass = computed(() => {
-  if (themeMode.value === "walk") {
+  if (themeStore.current?.name === "walk") {
     if (icon !== "lessonstable" && icon !== "exam" && icon !== "score") {
       return "icon-15th-" + icon;
     } else {
@@ -38,30 +39,20 @@ const iconClass = computed(() => {
   }
 });
 
-const isDisabled = ref(false);
-// 之后需要改动，目前zf和oauth的功能是等效的，因此zf和oauth有一个为true即可使用
-// 原来的代码是 if (requireActive.value === "zf" && !serviceStore.user.isBindZF)
-if (requireActive.value === "zf" && !serviceStore.user.isBindZF && !serviceStore.user.isBindOauth)
-  isDisabled.value = true;
-if (requireActive.value === "library" && !serviceStore.user.isBindLibrary)
-  isDisabled.value = true;
-if (requireActive.value === "yxy" && !serviceStore.user.isBindYXY)
-  isDisabled.value = true;
-
 async function appTaped() {
-  if (isDisabled.value) {
+  if (props.disabled) {
     await Taro.navigateTo({ url: "/pages/bind/index" });
     Taro.showToast({
       icon: "none",
       title: "请绑定相关账号"
     });
-  } else if (url.value) await Taro.navigateTo({ url: url.value });
+  } else await Taro.navigateTo({ url: props.url });
 }
 
 const backgroundColor = computed(() => {
-  if (isDisabled.value)
+  if (props.disabled)
     return { "--bg-color": "var(--wjh-color-light)" };
-  else return { "--bg-color": `var(--wjh-color-${bg.value}-600)` };
+  else return { "--bg-color": `var(--wjh-color-${props.bg}-600)` };
 });
 
 </script>

src/components/AppList/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <view v-if="applist" class="applist">
+  <view v-if="appListStore.list.length" class="applist">
     <app-list-item
-      v-for="(item, index) in applist"
+      v-for="(item, index) in appListStore.list"
       :key="index"
       :label="item.title"
       :url="item.route"
-      :icon="item.route.split('/')[2]"
       :bg="item.backgroundColor"
-      :require="item.require"
+      :disabled="item.disabled"
+      :icon="item.route.split('/')[2]"
     />
   </view>
   <card v-else>
@@ -16,14 +16,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import AppListItem from "./AppListItem/index.vue";
 import Card from "../Card/index.vue";
-import { serviceStore } from "@/store";
 import "./index.scss";
+import useAppListStore from "@/store/service/appList";
 
-const applist = computed(() => {
-  return serviceStore.appList;
-});
+const appListStore = useAppListStore();
 
 </script>

src/components/Button/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <button
+  <taro-button
     :style="{ backgroundColor: `var(--wjh-color-${props.color})` }"
     :class="[
       `wjh-button`,
@@ -8,14 +8,16 @@
       blockClass,
       shapeClass
     ]"
+    @tap="handleTap"
   >
     <slot />
-  </button>
+  </taro-button>
 </template>
 
 <script setup lang="ts">
 import "./index.scss";
 import { computed } from "vue";
+import { Button as TaroButton } from "@tarojs/components";
 
 type PropsType = {
   size?: "small" | "middle" | "large",
@@ -25,6 +27,10 @@ type PropsType = {
   disable?: boolean
 };
 
+const emit = defineEmits<{
+  tap: []
+}>();
+
 const props = withDefaults(defineProps<PropsType>(), {
   size: "middle",
   shape: "default",
@@ -45,4 +51,8 @@ const shapeClass = computed(() =>
   `wjh-button-shape-${props.shape}`
 );
 
+function handleTap() {
+  if (!props.disable) emit("tap");
+}
+
 </script>

src/components/ElectricityQuickView/index.vue

@@ -12,7 +12,7 @@
       <view v-if="!loading" class="text-wrapper">
         <text>寝室剩余电费</text>
         <text :class="isUrgent ? 'dangerous' : 'normal'">
-          {{ balanceData?.data.soc || 0 }}
+          {{ balance }}
         </text>
         <text>度</text>
       </view>
@@ -28,36 +28,23 @@ import { QuickView } from "@/components";
 import Taro from "@tarojs/taro";
 import "./index.scss";
 import { computed } from "vue";
-import { YxyService } from "@/services";
-import store, { serviceStore } from "@/store";
 import Card from "../Card/index.vue";
 import dayjs from "dayjs";
-import { useRequest } from "@/hooks";
+import useElectricityBalanceStore from "@/store/service/balance";
+import { storeToRefs } from "pinia";
+
+const { loading, balance, error, updateTime } = storeToRefs(useElectricityBalanceStore());
 
 function nav2electricity() {
   Taro.navigateTo({ url: "/pages/electricity/index" });
 }
 
-const { data: balanceData, loading, error } = useRequest(
-  YxyService.queryBalance, {
-    onSuccess: (res) => {
-      if (res.data.data?.soc) {
-        store.commit("setBalance", res.data.data.soc);
-      } else throw new Error();
-    }
-  }
-);
-
 const isUrgent = computed(() => {
-  if (balanceData.value)
-    return balanceData.value.data.soc < 20;
-  else
-    return false;
+  return balance.value < 20;
 });
 
 const updateTimeString = computed(() => {
-  const time = serviceStore.electricity.updateTime.balance;
-  return time && !error.value ? dayjs(time).fromNow() : "更新失败";
+  return updateTime.value && !error.value ? dayjs(updateTime.value).fromNow() : "更新失败";
 });
 
 </script>