快捷導(dǎo)航

vue3.0列表頁面做緩存的方法代碼

更新時(shí)間：2024年04月19日 10:57:40 作者：悠悠~飄

很多時(shí)候?yàn)榱俗屘岣哂脩舻捏w驗(yàn)感,在頁面上添加緩存,是十分有必要的,?下面這篇文章主要給大家介紹了關(guān)于vue3.0列表頁面做緩存的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一.設(shè)置動(dòng)態(tài)keepalive

   <router-view v-slot="{ Component, route }">
            <keep-alive :include="cacheViewsState">
              <component :is="Component" />
            </keep-alive>
   </router-view>

可以將要緩存的頁面作為vuex全局變量?jī)?chǔ)存

const cacheViewsState = store.state.app.cachedViews

將cachedViews 存入vuex：

  state: {
  
    cachedViews: ['listPage']
  },
mutations:{

 ADD_CACHED_VIEW: (state, view) => {
      if (state.cachedViews.includes(view)) return
      state.cachedViews.push(view)
    },
 DEL_CACHED_VIEW: (state, view) => {
      const index = state.cachedViews.indexOf(view)
      index > -1 && state.cachedViews.splice(index, 1)
    }
},
  actions: {
//添加緩存組件
    addCachedView({ commit }, view) {
      commit('ADD_CACHED_VIEW', view)
    },
    //刪除緩存組件
    delCachedView({ commit, state }, view) {
      return new Promise((resolve) => {
        commit('DEL_CACHED_VIEW', view)
        resolve([...state.cachedViews])
      })
    }
}

二.頁面初始化數(shù)據(jù)緩存處理

將頁面導(dǎo)出命名空間設(shè)置為動(dòng)態(tài)緩存頁面名單

<script>
export default {
  name: 'listPage'
}
</script>

onActivated 注冊(cè)一個(gè)回調(diào)函數(shù)，若組件實(shí)例是 <KeepAlive> 緩存樹的一部分，當(dāng)組件從 DOM 中被移除時(shí)調(diào)用。

這個(gè)鉤子在服務(wù)器端渲染期間不會(huì)被調(diào)用。

onActivated(() => {
  getList() // 初始化列表
})

附：Vue3.0使用keep-alive實(shí)現(xiàn)頁面緩存不刷新

1.應(yīng)用場(chǎng)景

1.列表頁進(jìn)入詳情頁，再從詳情頁返回列表頁；列表頁緩存不刷新。保持原來選中的查詢參數(shù)以及當(dāng)前頁

2.某個(gè)新增頁面分為兩步，分為A頁面和B頁面；當(dāng)?shù)谝徊紸頁面信息填好后，點(diǎn)擊下一步到第二步B頁面。再返回到第一步A頁面，A頁面信息不丟失。同理第二步填好信息返回到第一步，再回到第二頁，第二頁頁面信息不丟失。

2.解決步驟

1.App.vue

//isRouterAlive：通過先設(shè)置isRouterAlive為false再設(shè)置為true可實(shí)現(xiàn)組件的銷毀
<router-view v-slot="{ Component }" v-if="isRouterAlive">
    <keep-alive>
          <component :is="Component" v-if="_this.$route.meta.keepAlive" :key="$route.name" />
    </keep-alive>
    <component :is="Component" v-if="!_this.$route.meta.keepAlive" />
</router-view>

2.router.js

//設(shè)置meta
const routes: Array<RouteRecordRaw> = [
   {
        path: 'list',
        name: 'list',
        meta: { keepAlive: true, cacheList: ['detail'] },
        component: () => import('@/views/list.vue')
    },
]
//路由攔截
router.beforeEach((to, from, next) => {
   //從cacheList中的任何一個(gè)頁面返回，當(dāng)前頁面緩存
   const cacheList: any = to.meta.cacheList
   if (cacheList) {
      if (cacheList.indexOf(from.name) > -1) {
          to.meta.keepAlive = true
      } else {
          //解決第一次不緩存問題
          if (from.name) {
            to.meta.keepAlive = false
          } else {
            to.meta.keepAlive = true
          }
        }
      }
      next()  
}

3.list.vue

import { defineComponent, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
export default defineComponent({
  name: 'list',
  setup() {
     onBeforeRouteLeave((to, from, next) => {
      //當(dāng)即將訪問的界面不是detail則銷毀組件，以免上一次緩存信息存在
      const cacheList: any = ['detail']
      if (cacheList.indexOf(to.name) === -1) {
        //銷毀緩存信息(vue3沒有_this.$destory()方法，所以通過v-if實(shí)現(xiàn)組件的銷毀)
       //vuex改變?nèi)肿兞縤sRouterAlive的值
        _this.$store.commit('menu/changeRouterAlive', false)
        nextTick(() => {
          _this.$store.commit('menu/changeRouterAlive', true)
        })
      }
      next()
    })
  }
})