Vue keep-alive通过vuex动态缓存

在需要组件缓存的页面路由添加keep-alive属性 为true
 [{
        path: 'text',
        component: () =>
            import('@/views/text/index'),
        name: 'text',
        meta: { title: 'text', needRole: true, keepAlive: true }
    },
在app.vue中加入keep-alive 标签 <script>标签中导入vuex
<template>
  <div id="app">
    <keep-alive :include="cachedViews" :max="10">
      <router-view />
    </keep-alive>
  </div>
</template>

import store from '@/store'
import { mapGetters } from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapGetters(['cachedViews'])
  },
  watch: {
    $route: {
      handler(newVal) {
        const {
          name,
          meta: { keepAlive }
        } = newVal
        if (name && keepAlive) {
          store.dispatch('tagsView/addCachedView', newVal)
        }
      },
      immediate: true
    }
  }
}
Vuex store/moudle/tagView.js 缓存组件(增加,删除,更新)
const state = {
  cachedViews: []
}

const mutations = {
  ADD_CACHED_VIEW: (state, view) => {
    if (state.cachedViews.includes(view.name)) return
    if (!view.meta.noCache) {
      state.cachedViews.push(view.name)
    }
  },
  DEL_CACHED_VIEW: (state, view) => {
    const index = state.cachedViews.indexOf(view.name)
    index > -1 && state.cachedViews.splice(index, 1)
  },

const 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])
    })
  },

}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
Vuex store/getter.js
const getters = {
  cachedViews: state => state.tagsView.cachedViews,
}
export default getters
Vuex store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  getters
})

export default store
页面设置 beforeRouteLeave生命周期函数 定义去往哪些页面需要缓存
import store from '@/store'
beforeRouteLeave(to, from, next) {
    // 去这些界面我需要缓存
    const routerArr = []
    if (!routerArr.includes(to.name)) {
      // 不在缓存列表中,从cachedViews缓存列表中移除
      store.dispatch('tagsView/delCachedView', from)
    }
    next()
  }
posted @ 2023-07-06 20:16  Happy-P  阅读(85)  评论(0)    收藏  举报