vue項(xiàng)目keepAlive配合vuex動(dòng)態(tài)設(shè)置路由緩存方式

更新時(shí)間：2022年04月15日 16:52:00 作者：qlj224

vue項(xiàng)目keepAlive配合vuex動(dòng)態(tài)設(shè)置路由緩存方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

需求

首頁(yè) → 列表頁(yè)→ 詳情頁(yè)（緩存列表頁(yè)面） → 列表頁(yè)（不重新加載列表頁(yè)）→ 首頁(yè)（清除列表頁(yè)的緩存）

效果圖

在這里插入圖片描述

解決方案

直接使用keepAlive會(huì)出現(xiàn)一個(gè)問(wèn)題，當(dāng)從查詢1進(jìn)入列表頁(yè)面，這時(shí)緩存list組件，然后返回首頁(yè)，點(diǎn)擊查詢2，會(huì)發(fā)現(xiàn)list的數(shù)據(jù)是查詢1的，因?yàn)檫@里直接調(diào)用了上一次的緩存因此，在返回首頁(yè)后需清除list的緩存，下次進(jìn)入list將重新初始化。

利用keepAlive進(jìn)行路由緩存，keepAlive的include 和 exclude 屬性允許組件有條件地緩存。

配合vuex維護(hù)一個(gè)緩存數(shù)組即可，不多BB，直接上代碼

1.App.vue文件

利用include屬性進(jìn)行選擇性緩存

<template>
? <div style="height: 100%;">
? ? <keep-alive :include="$store.state.common.cachedRouteNames">
? ? ? <router-view />
? ? </keep-alive>
? </div>
</template>

<script>
export default {
? name: 'App'
};
</script>

2.main.js文件

配置路由keepAlive狀態(tài)

import Vue from 'vue';
// import Vue from 'vue/dist/vue.esm.js'
import App from '../src/App.vue';
import router from '../src/router/index';
// import "../src/assets/style/reset.css";
import 'lib-flexible';
import utils from './utils/utils';
import store from './store/index';
// 配置路由keepAlive狀態(tài)
utils.setRouterBeforeEach(router);
// runtime模式
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

3.store/modules/common.js文件

vuex管理緩存數(shù)組，編寫(xiě)添加和刪除緩存路由方法

const UPDATE_CACHEDROUTENAMES = 'update_cachedroutenames';
const state = {
  activatedReloadData: true, // 頁(yè)面activated時(shí)是否需要重新加載
  // 緩存的路由列表
  cachedRouteNames: []
};
const mutations = {
  [UPDATE_CACHEDROUTENAMES](st, { action, route }) {
    const methods = {
      add: () => {
        st.cachedRouteNames.push(route);
      },
      delete: () => {
        st.cachedRouteNames.splice(st.cachedRouteNames.findIndex(e => e === route), 1);
      }
    };
    methods[action]();
  }
};
export default {
  namespaced: true,
  state,
  mutations
};

4.utils/utils.js文件

配置路由keepAlive狀態(tài)

import store from '../store/index';
const { cachedRouteNames } = store.state.common;
const changeRoutes = (route, type) => {
  const routeName = route.components.default.name;
  if (routeName && type === 'add' ? !cachedRouteNames.includes(routeName) : cachedRouteNames.includes(routeName)) {
    store.commit('common/update_cachedroutenames', {
      action: type,
      route: routeName
    });
  }
};
// 定義添加緩存組件name函數(shù)，設(shè)置的時(shí)組件的name
const addRoutes = (route) => {
  changeRoutes(route, 'add');
};
// 定義刪除緩存組件name函數(shù)，設(shè)置的是組件的name
const deleteRoutes = (route) => {
  changeRoutes(route, 'delete');
};
// 配置路由keepAlive狀態(tài)
const setRouterBeforeEach = (router) => {
  router.beforeEach((to, from, next) => {
    // 對(duì)該組件是否讀取緩存進(jìn)行處理
    to.matched.forEach((item) => {
      const routes = item.meta.cachedRouteNames;
      if (item.meta.keepAlive && (!routes || (routes && (!from.name || routes.includes(from.name))))) {
        addRoutes(item);
      } else {
        deleteRoutes(item);
      }
    });
    next();
  });
  // 全局混入。在該組件被解析之后，若是屬于需要緩存的組件，先將其添加到緩存配置中，進(jìn)行緩存
  Vue.mixin({
    beforeRouteEnter(to, from, next) {
      next(() => {
        to.matched.forEach((item) => {
          if (to.meta.keepAlive) {
            addRoutes(item);
          }
        });
      });
    },
  });
};
export default {
  setRouterBeforeEach
};

5.store/index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';
import state from './state';
import getters from './getters';
import app from './modules/app';
import common from './modules/common';
Vue.use(Vuex);
const store = new Vuex.Store({
  modules: { app, common },
  state,
  mutations,
  actions,
  getters
});
export default store;

6.router/index.js文件

keepAlive：設(shè)置緩存
cachedRouteNames：設(shè)置緩存條件

// An highlighted block
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const Home = resolve => require(['../routers/Home.vue'], resolve);
const List = resolve => require(['../routers/list.vue'], resolve);
const Detail = resolve => require(['../routers/detail.vue'], resolve);
const router = new VueRouter({
  routes: [
    {
      name: 'Home',
      path: '/home',
      component: Home
    },
    {
      name: 'List',
      path: '/list',
      component: List,
      meta: {
        keepAlive: true,
        // 緩存條件：從List --> Detail 則緩存List
        cachedRouteNames: ['Detail']
      }
    },
    {
      name: 'Detail',
      path: '/detail',
      component: Detail
    }
  ]
});
export default router;

7.routers/Home.vue文件

export default {
  name: 'Home',
  components: {
    HeaderBar
  },
  data() {
    return {
      list: [
        '查詢1',
        '查詢2'
      ]
    };
  },
  created() {
    // this.getData();
    // console.log(111111);
  },
};
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: