✨ feat(keepAlive模块): 无刷新搭配pinia使用

@@ -50,7 +50,7 @@ export default {
           console.error(err); 
         });
       },
-      getProductDetail (type, id) {
+      getProductDetail (type, id) { // 查询更新作品详情
         axios.get('/srv/?a=prod_info', {
           params: {
             prod_id: id
@@ -60,6 +60,8 @@ export default {
           if (res.data.code === 1) {
             this.detail[`is_${type}`] = res.data.data[`is_${type}`];
             this.detail[`${type}_num`] = res.data.data[`${type}_num`];
+            // 传回数据
+            this.$emit('on-click', this.detail);
           } else {
             // tslint:disable-next-line: no-console
             console.warn(res);
@@ -76,4 +78,4 @@ export default {
       }
     }
   }
-};
\ No newline at end of file
+};

@@ -6,7 +6,8 @@ export const mainStore = defineStore('main', {
       msg: 'Hello world',
       count: 0,
       auth: false,
-      comment_num: 0
+      comment_num: 0,
+      video_detail: {}
     };
   },
   getters: {},
@@ -16,6 +17,9 @@ export const mainStore = defineStore('main', {
     },
     changeCommentNum (num) {
       this.comment_num = num;
+    },
+    changeVideoDetail (v) {
+      this.video_detail = v;
     }
   },
-});
\ No newline at end of file
+});

@@ -97,6 +97,9 @@
 </template>
 
 <script setup>
+import { mainStore } from '@/store'
+import { storeToRefs } from 'pinia'
+
 import Cookies from 'js-cookie'
 import { useVideoList } from '@/composables/useVideoList.js'
 
@@ -113,7 +116,7 @@ import icon_unsubscribe from '@images/icon-dingyue02@2x.png'
 
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
 import tools from '@/common/tool'
-import { ref, reactive, onMounted, nextTick, onActivated } from 'vue'
+import { ref, reactive, onMounted, nextTick, onActivated, triggerRef } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import axios from '@/utils/axios';
 import $ from 'jquery'
@@ -247,6 +250,21 @@ const uploadVideo = () => {
 /****************** keepAlive 模块 *******************/
 
 onActivated(() => { // keepAlive 重置后执行回调
+  // TAG: pinia应用，动态刷新数据
+  // 处理数据未刷新数据显示问题
+  const store = mainStore()
+  // Pinia 解构方法：storeToRefs
+  const { video_detail } = storeToRefs(store);
+  // 如果作品信息有变化及时修正
+  const arr = ref([]);
+  _.each(prod_list.value, (item) => {
+    if (item.id === video_detail.value.id) {
+      item = video_detail.value
+    }
+    arr.value.push(item);
+  })
+  // 触发更新
+  prod_list.value = arr.value;
 });
 
 const changeRouterKeepAlive = (path, keepAlive) => {

@@ -53,6 +53,9 @@
 </template>
 
 <script setup>
+import { mainStore } from '@/store'
+import { storeToRefs } from 'pinia'
+
 import VideoCard from '@/components/VideoCard/index.vue'
 
 import { ref, onActivated } from 'vue'
@@ -118,6 +121,21 @@ const followUser = (status) => {
 /****************** keepAlive 模块 *******************/
 
 onActivated(() => { // keepAlive 重置后执行回调
+  // TAG: pinia应用，动态刷新数据
+  // 处理数据未刷新数据显示问题
+  const store = mainStore()
+  // Pinia 解构方法：storeToRefs
+  const { video_detail } = storeToRefs(store);
+  // 如果作品信息有变化及时修正
+  const arr = ref([]);
+  _.each(userInfo.value.prod, (item) => {
+    if (item.id === video_detail.value.id) {
+      item = video_detail.value
+    }
+    arr.value.push(item);
+  })
+  // 触发更新
+  userInfo.value.prod = arr.value;
 });
 
 const changeRouterKeepAlive = (path, keepAlive) => {

@@ -13,7 +13,7 @@
     </div>
 
     <div class="video-player">
-      <video-detail :item="videoInfo"></video-detail>
+      <video-detail :item="videoInfo" @on-click="onVideoDetail"></video-detail>
     </div>
 
     <div class="video-main">
@@ -42,7 +42,7 @@ import { storeToRefs } from 'pinia'
 
 import VideoDetail from '@/components/VideoDetail/index.vue'
 import { ref, reactive, onMounted, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import axios from '@/utils/axios';
 import $ from 'jquery'
 import { Toast } from 'vant';
@@ -112,6 +112,11 @@ onMounted(() => {
     console.error(err); 
   })
 })
+
+const onVideoDetail = (v) => {
+  // 缓存作品信息，给其他页使用
+  store.changeVideoDetail(v);
+}
 </script>
 
 <script>