Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "vue project keepAlive with vuex dynamic how to set routing cache". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "vue project keepAlive with vuex dynamic how to set routing cache" can help you solve the problem.

Demand

Home → list page → details page (cache list page) → list page (do not reload list page) → home page (clear list page cache)

Effect picture

Solution

There is a problem when using keepAlive directly. When entering the list page from query 1, cache the list component, then return to the home page, click query 2, you will find that the data of list is query 1, because the previous cache was called directly here, so you need to clear the cache of list after returning to the home page, and the next time you enter list will be reinitialized.

KeepAlive is used for route caching, and the include and exclude properties of keepAlive allow components to cache conditionally.

Cooperate with vuex to maintain a cache array, not much BB, directly on the code

1.App.vue file

Selective caching using include attribute

Export default {name: 'App'}; 2.main.js file

Configure routing keepAlive statu

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';// configure routing keepAlive status utils.setRouterBeforeEach (router) / / runtime mode new Vue ({router, store, render: h = > h (App)}). $mount ('# app'); 3.store/modules/common.js file

Vuex manages cache arrays and writes add and delete cache routing methods

Const UPDATE_CACHEDROUTENAMES = 'update_cachedroutenames';const state = {activatedReloadData: true, / / whether you need to reload the cached route list cachedRouteNames: []} when you activated the page; 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 file

Configure routing keepAlive statu

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});}} / / define the name function to add the cache component, set the component nameconst addRoutes = (route) = > {changeRoutes (route, 'add');}; / / define the delete cache component name function, and set the component's nameconst deleteRoutes = (route) = > {changeRoutes (route,' delete');} / / configure routing keepAlive status const setRouterBeforeEach = (router) = > {router.beforeEach ((to, from, next) = > {/ / A process whether the component reads the cache or not 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 ();}); / / Global blending. After the component is parsed, if it belongs to the component that needs caching, first add it to the cache configuration and cache Vue.mixin ({beforeRouteEnter (to, from, next) {next () = > {to.matched.forEach ((item) = > {if (to.meta.keepAlive) {addRoutes (item);}});}) },});}; export default {setRouterBeforeEach}; 5.store/index.js file 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 file

KeepAlive: setting cach

CachedRouteNames: setting cache condition

/ / An highlighted blockimport 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) / / cache condition: from List-- > Detail, cache List cachedRouteNames: ['Detail']}}, {name:' Detail', path:'/ detail', component: Detail}]}) Export default router;7.routers/Home.vue file export default {name: 'Home', components: {HeaderBar}, data () {return {list: [' query 1 query, 'query 2']};}, created () {/ / this.getData (); / / console.log (111111);},} This is the end of the content about "vue project keepAlive with vuex dynamic how to set routing cache". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.