xuex刷新丢失个人列表组件

2023-07-28 15:31:32 +08:00
parent 385d8e34c5
commit 5648197acb
9 changed files with 98 additions and 18 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,8 @@
        "vue-meta": "^3.0.0-alpha.2",
        "vue-router": "^4.0.3",
        "vue3-lazyload": "^0.3.6",
-        "vuex": "^4.0.0"
+        "vuex": "^4.0.0",
+        "vuex-persistedstate": "^4.1.0"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "~5.0.0",
@@ -9043,6 +9044,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==",
+      "deprecated": "older versions vulnerable to prototype pollution"
+    },
    "node_modules/side-channel": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -9947,6 +9954,27 @@
        "vue": "^3.2.0"
      }
    },
+    "node_modules/vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      },
+      "peerDependencies": {
+        "vuex": "^3.0 || ^4.0.0-rc"
+      }
+    },
+    "node_modules/vuex-persistedstate/node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -17139,6 +17167,11 @@
      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
      "dev": true
    },
+    "shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw=="
+    },
    "side-channel": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -17786,6 +17819,22 @@
        "@vue/devtools-api": "^6.0.0-beta.11"
      }
    },
+    "vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+          "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+        }
+      }
+    },
    "watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
    "vue-meta": "^3.0.0-alpha.2",
    "vue-router": "^4.0.3",
    "vue3-lazyload": "^0.3.6",
-    "vuex": "^4.0.0"
+    "vuex": "^4.0.0",
+    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@@ -64,7 +64,7 @@
                        <span class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data &&
                            data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
                        <span>/{{data && data.data && data.data.rentalperiod}}</span>
-                        <span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ config.rentalduration[data.data && data.data.rentalduration] 
+                        <span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ listData.data.rentalduration[data.data && data.data.rentalduration] 
                             }}]</span>
                    </div>
                </div>
@@ -148,8 +148,6 @@ let loadFinish = () => {
 const route = useRouter()
 let routePath = ref('')
 routePath.value = route.currentRoute.value.meta.path
-//数据包
-let config=store.state.indexData.config

 //地区数据
 let location = reactive({ data: {} })
--- a/src/components/public/backToTop.vue
+++ b/src/components/public/backToTop.vue
@@ -5,13 +5,13 @@
 </template>

 <script setup>
-onMounted(() => {
-    window.addEventListener('scroll', handleScroll);
-});
+// onMounted(() => {
+//     window.addEventListener('scroll', handleScroll);
+// });

-onUnmounted(() => {
-    window.removeEventListener('scroll', handleScroll);
-});
+// onUnmounted(() => {
+//     window.removeEventListener('scroll', handleScroll);
+// });

 const handleScroll = () => {
    if (Math.random() > 0.3) return
--- a/src/components/seachPage/input.vue
+++ b/src/components/seachPage/input.vue
@@ -396,8 +396,8 @@ let getLocationData = (data) => {

 //更新当前数据数量
 let setListCount = (item, num) => {
-    console.log(item, num)
-    console.log(seachKey.key)
+    // console.log(item, num)
+    // console.log(seachKey.key)
    if (item.tabType === "intermediary") {
        seachKey.key['intermediary']['count'] = num
    } else if (item.tabType === "person") {
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,4 +1,5 @@
 import { createStore } from 'vuex'
+import createPersistedstate from "vuex-persistedstate";

 export default createStore({
  state: {
@@ -32,5 +33,16 @@ export default createStore({
  actions: {
  },
  modules: {
-  }
+  },
+  plugins:[
+    createPersistedstate({
+      storage:window.sessionStorage,
+      reducer(val){
+        return{
+          routeList:val.routeList,
+          indexData:val.indexData
+        }
+      }
+    })
+  ]
 })
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -268,7 +268,7 @@ let noWaterfallList = reactive({ 1: 3, 2: 3, 3: 3, 4: 3 })

 //判断最小值
 let getMinHeight = (data) => {
-  if (!currentInstance.ctx.$refs.waterfall1) return
+  if (!currentInstance.ctx.$refs&&!currentInstance.ctx.$refs.waterfall1) return
  let waterfallAll = [
    currentInstance.ctx.$refs.waterfall1.offsetHeight,
    currentInstance.ctx.$refs.waterfall2.offsetHeight,
--- a/src/views/seachIndex.vue
+++ b/src/views/seachIndex.vue
@@ -5,7 +5,7 @@
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
                <div class="dis-f jus-bet"
-                    v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.intermediary !== ''">
+                    v-show="dataList.data && dataList.data.length > 0&&seachSelectData.data.tabType!=='apartment' && seachSelectData.data.intermediary !== ''">
                    <div ref="list">
                        <biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
                            listId="1"></biserialItem>
@@ -15,7 +15,7 @@
                            listId="2"></biserialItem>
                    </div>
                </div>
-                <div v-show="seachSelectData.data&&seachSelectData.data.intermediary === '' && dataList.data && dataList.data.length > 0"
+                <div v-show="seachSelectData.data&&seachSelectData.data.tabType==='apartment' && dataList.data && dataList.data.length > 0"
                    ref="gridContainer">
                    <apartment-item v-for="item in listApartment" :item="item"></apartment-item>
                </div>
@@ -123,7 +123,9 @@ let getDataList = (data) => {
                let data = res.data
                dataList.count = res.data.count
                dataCount.value = res.data.count
+                if(pages.value===1)listApartment.value=[]
                listApartment.value = listApartment.value.concat(data.data)
+                console.log(seachSelectData.data)
                nextTick(() => {
                    masonryInstance.reloadItems();
                    masonryInstance.layout();
--- a/yarn.lock
+++ b/yarn.lock
@@ -2741,6 +2741,11 @@ deepmerge@^1.5.2:
  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz"
  integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==

+deepmerge@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 default-gateway@^6.0.3:
  version "6.0.3"
  resolved "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz"
@@ -5325,6 +5330,11 @@ shell-quote@^1.7.3:
  resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz"
  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==

+shvl@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz"
+  integrity sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==
+
 side-channel@^1.0.4:
  version "1.0.4"
  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
@@ -5832,7 +5842,15 @@ vue3-lazyload@^0.3.6:
  dependencies:
    vue-demi "^0.12.5"

-vuex@^4.0.0:
+vuex-persistedstate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz"
+  integrity sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==
+  dependencies:
+    deepmerge "^4.2.2"
+    shvl "^2.0.3"
+
+"vuex@^3.0 || ^4.0.0-rc", vuex@^4.0.0:
  version "4.1.0"
  resolved "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz"
  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==