添加Caches缓存(发现/推荐 页面)

src/App.vue

@@ -32,6 +32,7 @@ const store = useStore();
 
 //载入localstorage的设置
 store.commit("loadSettings");
+store.commit("loadCaches");
 
 //处理route消息
 const routeToken = pubsub.subscribe(

src/store/index.js

@@ -33,6 +33,20 @@ export default createStore({
         );
       })?.key;
     },
+    cache:
+      (state) =>
+      (key, expire = 0) => {
+        if (state.caches[key]) {
+          if (
+            state.caches[key].time &&
+            (expire <= 0 ||
+              Date.now() - state.caches[key].time <
+                1000 * expire)
+          )
+            return state.caches[key].data;
+        }
+        return null;
+      },
   },
   mutations: {
     //载入settings设置
@@ -46,6 +60,17 @@ export default createStore({
       saveLoaclSettings(state.settings);
     },
 
+    //载入caches设置
+    loadCaches(state) {
+      const l = localStorage.getItem("zmusic.caches");
+      if (l) state.caches = JSON.parse(l);
+    },
+    //保存caches设置
+    saveCaches(state, caches) {
+      state.caches = { ...state.caches, ...caches };
+      saveLoaclCaches(state.caches);
+    },
+
     //保存当前路由
     saveCurrentRoute(state, currentRoute) {
       state.settings.currentRoute = currentRoute;
@@ -83,6 +108,9 @@ function saveLoaclSettings(s) {
     JSON.stringify(s)
   );
 }
+function saveLoaclCaches(s) {
+  localStorage.setItem("zmusic.caches", JSON.stringify(s));
+}
 function saveLoaclTheme(s) {
   localStorage.setItem("zmusic.theme", JSON.stringify(s));
 }

src/views/discover/Recommend.vue

@@ -216,7 +216,7 @@ import {
 import pubsub from "pubsub-js";
 import ArtistsSpan from "@/components/ArtistsSpan.vue";
 
-console.log("recommend 初始化");
+// console.log("recommend 初始化");
 
 const store = useStore();
 
@@ -224,39 +224,47 @@ const play = (id) => {
   pubsub.publish("zp.play", { id, im: true });
 };
 
-//#region 初始载入数据
-//轮播图片
+
+//#region 轮播图片
 let banners = ref([]);
+banners.value = store.getters.cache('banners')
 getBanner(0)
   .then((res) => {
     banners.value = res.data.banners;
+    store.commit("saveCaches", {
+      banners: { data: banners.value, time: Date.now() },
+    });
     // console.log(banners.value);
   })
   .catch((err) => {
     console.log("getBanner err", err);
   });
 
+//#endregion
+
+//#region 最新音乐
 let topSongs = ref([]);
+// topSongs.value = store.getters.cache('topSongs')
+if(store.getters.cache('topSongs'))
+{
+  topSongs.value = store.getters.cache('topSongs')
+  console.log('载入Caches');
+}
 //最新音乐
 getTopSong()
   .then((res) => {
     topSongs.value = res.data.data.filter((item, index) => {
       return index < 10;
     });
+    store.commit("saveCaches", {
+      topSongs: { data: topSongs.value, time: Date.now() },
+    });
     // console.log(topSongs.value);
   })
   .catch((err) => {
     console.log("getTopSong err", err);
   });
 
-
-// onMounted(() => {
-//   console.log("onMounted");
-// });
-// onUnmounted(() => {
-//   console.log("卸载组件");
-// });
-
 function songAlias(alias) {
   if (alias.length > 0) return "[" + alias.join(",") + "]";
 }
@@ -269,27 +277,40 @@ function songArtists(artists) {
       .join(" ");
   }
 }
-//推荐歌单
+//#endregion
+
+//#region 推荐歌单
 let personalized = ref([]);
+personalized.value = store.getters.cache('personalized')
 getPersonalized(8)
   .then((res) => {
     personalized.value = res.data.result;
+    store.commit("saveCaches", {
+      personalized: { data: personalized.value, time: Date.now() },
+    });
     // console.log(personalized.value);
   })
   .catch((err) => {
     console.log("getPersonalized err", err);
   });
-//推荐MV
+//#endregion
+
+//#region 推荐MV
 let personalizedMV = ref([]);
+personalizedMV.value = store.getters.cache('personalizedMV')
 getPersonalizedMV()
   .then((res) => {
     personalizedMV.value = res.data.result;
+    store.commit("saveCaches", {
+      personalizedMV: { data: personalizedMV.value, time: Date.now() },
+    });
     // console.log(personalized.value);
   })
   .catch((err) => {
     console.log("getPersonalizedMV err", err);
   });
 //#endregion
+
 </script>
 
 <style lang="less" scoped>