商品列表组件缓存问题

src/components/basicTool/transverse-label/index.vue

@@ -71,7 +71,7 @@
           <div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
 
             <!-- <goods-list class="goodsListItem" :datas="item1"></goods-list> -->
-           <goods-list :class="['goodsListItemIndex'+index,'transverse-label-goodsListItem']" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list>
+           <goods-list :storageKey="'transverseLabel'+componentIndex" :class="['goodsListItemIndex'+index,'transverse-label-goodsListItem']" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list>
 
           </div>
           <div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
@@ -235,11 +235,16 @@ export default {
           })
         })
         console.log(pageGoodsList,storageDatasList,ids,loadingFlag,pageNumList,'newVal');
-        wx.setStorageSync("pageGoodsList",pageGoodsList)
-        wx.setStorageSync("storageDatasList",storageDatasList)
-        wx.setStorageSync("ids",ids)
-        wx.setStorageSync("loadingFlag",loadingFlag)
-        wx.setStorageSync("pageNumList",pageNumList)
+        let pageGoodsListKey = `transverseLabel${this.componentIndex}_pageGoodsList`;
+        let storageDatasListKey = `transverseLabel${this.componentIndex}_storageDatasList`;
+        let idsKey = `transverseLabel${this.componentIndex}_ids`;
+        let loadingFlagKey = `transverseLabel${this.componentIndex}_loadingFlag`;
+        let pageNumListKey = `transverseLabel${this.componentIndex}_pageNumList`;
+        wx.setStorageSync(pageGoodsListKey,pageGoodsList)
+        wx.setStorageSync(storageDatasListKey,storageDatasList)
+        wx.setStorageSync(idsKey,ids)
+        wx.setStorageSync(loadingFlagKey,loadingFlag)
+        wx.setStorageSync(pageNumListKey,pageNumList)
         return this.datas.componentData.tabList.filter(
           (item) => item.visible == undefined || item.visible == 1
         );

src/pages/home/index.vue

@@ -13,7 +13,10 @@
             <banner :datas="item"></banner>
           </div>
           <div v-else-if="item.componentCode=='goods-list' && item.componentInfo.visible == 1" style="height:100%;">
-            <goods-list :class="'goodsListItem' + index" :datas="item"></goods-list>
+            <!-- ***这个商品列表组件中需要对数据做缓存，可能有多个地方同时引用此组件
+                 必须在缓存前加个唯一标识不然所有组件全部操作同一个缓存
+             -->
+            <goods-list :storageKey="'home'+index" :class="'goodsListItem' + index" :datas="item"></goods-list>
           </div>
           <div v-else-if="item.componentCode == 'area-navigation' && item.componentInfo.visible == 1">
             <area-navigation :datas="item" :changeLocation="changeLocation"></area-navigation>
@@ -392,21 +395,23 @@ export default {
     }
 
 
-    //清除懒加载缓存
+    //清除商品列表组件懒加载缓存
+    // 需清除的缓存keyList
+    let keyList = ['pageGoodsList','storageDatasList','datasIndex','ids','loadingFlag','pageNumList'];
+    wx.getStorageInfo({
+      success (res) {
+        if(res.keys) {
+          res.keys.forEach((item,index)=>{
+            keyList.forEach((item1,index1)=>{
+              if(item.includes(item1)){
                 wx.removeStorage({
-      key: 'pageGoodsList'
+                  key: item
                 })
-    wx.removeStorage({
-      key: 'storageDatasList'
-    })
-     wx.removeStorage({
-      key: 'datasIndex'
+              }
             })
-    wx.removeStorage({
-      key: 'loadingFlag'
           })
-     wx.removeStorage({
-      key: 'pageNumList'
+        }
+      }
     })
     
     console.log('storageGoodsList---detory');

static/nativeComponents/GoodsList/index.js

 const app = getApp();
+const { log } = app;
 const { goodsApi, DFSImg, $themeToLink } = app;
 const componentOptions = {
   // 组件选项
@@ -11,10 +12,16 @@ const componentOptions = {
       type: Object
     },
     datasIndex:{
-      type: Number
+      type: Number,
+      default: 0
     },
     goodsListIndex:{
-      type: Number
+      type: Number,
+      default: 0
+    },
+    storageKey: {
+      type: String,
+      required: true // 必传
     }
   },
   // 组件数据
@@ -76,7 +83,7 @@ const componentOptions = {
   methods: {
     // setPageDatas(active){
       
-    //   this.pageGoodsList = wx.getStorageSync('pageGoodsList')
+    //   this.pageGoodsList = this.getStorageSync('pageGoodsList')
     //   console.log(this.pageGoodsList,active,'active');
     // },
     init() {
@@ -95,6 +102,17 @@ const componentOptions = {
         titleIcon
       });
       console.log(this.data.titleIcon, "----------------------------68");
+      let ids = this.getStorageSync(`ids`);
+      console.log(ids,'---ids--104'+this.data.storageKey)
+      log.info(ids,'---ids--105')
+      // 如果不是横向标签组件初始化缓存
+      if (!this.data.storageKey.includes('transverseLabel')) {
+        this.setStorageSync("pageGoodsList",[[]])
+        this.setStorageSync("storageDatasList",[[]])
+        this.setStorageSync("ids",[[]])
+        this.setStorageSync("loadingFlag",[false])
+        this.setStorageSync("pageNumList",[1])
+      }
       if (goodsType == 0) {
         if (goodsSource == "classify") {
           //商品分类
@@ -202,13 +220,15 @@ const componentOptions = {
             return element.terminalProductId;
           });
 
-          let storageIds = wx.getStorageSync('ids')
+          let storageIds = this.getStorageSync('ids')
+          console.log(this.data.goodsListIndex,storageIds,'--storageIds')
           storageIds[this.data.goodsListIndex] = ids
-          wx.setStorageSync('ids',storageIds)
+          this.setStorageSync('ids',storageIds)
 
-          let storageDatasList = wx.getStorageSync('storageDatasList')
+          let storageDatasList = this.getStorageSync('storageDatasList')
+          console.log(storageDatasList,'------228'+this.data.storageKey)
           storageDatasList[this.data.goodsListIndex] = this.data.datas.componentData
-          wx.setStorageSync('storageDatasList',storageDatasList)
+          this.setStorageSync('storageDatasList',storageDatasList)
           
           this.moreProduct(true);
         }
@@ -217,26 +237,26 @@ const componentOptions = {
 
     async moreProduct(flag) {
       // 没有数据了就不再请求了，直接return
-      if (this.data.pageGoodsList.length != 0  &&  this.data.pageGoodsList[this.data.datasIndex].length == wx.getStorageSync('ids')[this.data.datasIndex].length) return
+      if (this.data.pageGoodsList.length != 0  &&  this.data.pageGoodsList[this.data.datasIndex].length == this.getStorageSync('ids')[this.data.datasIndex].length) return
       this.setData({
         scrollLoading: true
       })
       let terminalProductIds = []
       console.log(pageNum,'page-----');
-      let pageNumList = wx.getStorageSync('pageNumList')
+      let pageNumList = this.getStorageSync('pageNumList')
       let pageNum = null
       if (flag) {
         pageNum = pageNumList[this.data.goodsListIndex]
-        terminalProductIds = wx.getStorageSync('ids')[this.data.goodsListIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize)
+        terminalProductIds = this.getStorageSync('ids')[this.data.goodsListIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize)
         pageNum += 1
         pageNumList[this.data.goodsListIndex] = pageNum
       }else{
         pageNum = pageNumList[this.data.datasIndex]
-        terminalProductIds = wx.getStorageSync('ids')[this.data.datasIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize)
+        terminalProductIds = this.getStorageSync('ids')[this.data.datasIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize)
         pageNum += 1
         pageNumList[this.data.datasIndex] = pageNum
       }
-      wx.setStorageSync('pageNumList',pageNumList)
+      this.setStorageSync('pageNumList',pageNumList)
       let {
         vipPrice,
         marketingTag,
@@ -295,20 +315,20 @@ const componentOptions = {
       });
       var that = this
 
-      let pageGoodsList = wx.getStorageSync('pageGoodsList') || []
+      let pageGoodsList = this.getStorageSync('pageGoodsList') || []
       if (flag) {
         pageGoodsList[that.data.goodsListIndex].push(...goodsList)
       }else{
         pageGoodsList[that.data.datasIndex].push(...goodsList)
         console.log(pageGoodsList[that.data.datasIndex],'--pageGoodsList[that.data.datasIndex]')
       }
-      wx.setStorageSync('pageGoodsList', pageGoodsList);
+      this.setStorageSync('pageGoodsList', pageGoodsList);
 
 
        // 获取是否要开启请求拦截
-      let loadingFlag = wx.getStorageSync('loadingFlag')
+      let loadingFlag = this.getStorageSync('loadingFlag')
       loadingFlag[that.data.datasIndex] = false
-      wx.setStorageSync('loadingFlag', loadingFlag);
+      this.setStorageSync('loadingFlag', loadingFlag);
       that.setData({
         pageGoodsList,
       })
@@ -353,7 +373,7 @@ const componentOptions = {
       var that = this
       console.log(that.data.datasIndex,that.data.goodsListIndex,'datasIndex');
       console.log(that.data.pageGoodsList[that.data.datasIndex]);
-      let storageDatasList = wx.getStorageSync('storageDatasList') || []
+      let storageDatasList = this.getStorageSync('storageDatasList') || []
       
       let { style } = storageDatasList[that.data.datasIndex];
       let type = ''
@@ -365,17 +385,17 @@ const componentOptions = {
       }
      
       let windowHeight =  wx.getSystemInfoSync().windowHeight
-      let pageGoodsList =  wx.getStorageSync('pageGoodsList') || []
+      let pageGoodsList =  this.getStorageSync('pageGoodsList') || []
       console.log(that.data.pageGoodsList,pageGoodsList,that.data.datasIndex,'pageGoodsList--loading');
 
-      let loadingFlag =  wx.getStorageSync('loadingFlag')
+      let loadingFlag =  this.getStorageSync('loadingFlag')
       // 如果所有的商品都加载完成直接return
       if (loadingFlag[that.data.datasIndex]) {
         console.log("如果所有的商品都加载完成直接return");
         return
       }
 
-      let ids = wx.getStorageSync('ids')[that.data.datasIndex]
+      let ids = this.getStorageSync('ids')[that.data.datasIndex]
       if (ids.length == that.data.pageGoodsList[that.data.datasIndex].length &&
         that.data.pageGoodsList[that.data.datasIndex][that.data.pageGoodsList[that.data.datasIndex].length -1].loadState == true
         ) {
@@ -396,7 +416,7 @@ const componentOptions = {
         })
         // that.pageGoodsList = pageGoodsList
         console.log(rects,pageGoodsList[that.data.goodsListIndex], pageGoodsList[that.data.datasIndex],'fff');
-        wx.setStorageSync('pageGoodsList',pageGoodsList)
+        that.setStorageSync('pageGoodsList',pageGoodsList)
 
 
 
@@ -406,7 +426,7 @@ const componentOptions = {
           that.setData({
             loadingFlag,
           })
-          wx.setStorageSync('loadingFlag',loadingFlag)
+          that.setStorageSync('loadingFlag',loadingFlag)
           
           that.moreProduct(false)
 
@@ -520,6 +540,14 @@ const componentOptions = {
         type: 1,
         link: linkVal
       });
+    },
+    setStorageSync(key, val) {
+      console.log(`${this.data.storageKey}_${key}`,'-------------533')
+      return wx.setStorageSync(`${this.data.storageKey}_${key}`,val)
+    },
+    getStorageSync(key) {
+      console.log(`${this.data.storageKey}_${key}`,'-------------537')
+      return wx.getStorageSync(`${this.data.storageKey}_${key}`)
     }
   }
 };