Vueでkeep-aliveを使用する:activated&include&vuex&ルーティングを組み合わせたbeforeEachダイナミックキャッシュ

前回、Vueでkeep-aliveを使用する文章を書きましたが、今から見れば、keep-aliveの最も簡単な使い方についての紹介としか言えませんが、このような使い方は実際のニーズを満たすことができないことが多いので、今回のプロジェクト開発と結びつけて、keep-aliveを動的にキャッシュする方法についてお話しします.
プロジェクトの需要:プロジェクトの多くのページの中で、1つのaページがあって、同時にaページ、b、c、dの3つのサブページを含んで、需要は:
1.ユーザがeページからaページに移動する場合にのみ、キャッシュページaの下のb,c,dの3つのサブページは、
2.同時にページaの下のb,c,dの3つのサブページが互いに切り替わるときに、それらをキャッシュし、
3.ルーティングがページaからジャンプしてページaに再アクセスすると、前のキャッシュがクリアされる.
(気を失ったと言って、ルートを見ましょう:)

{
    path:'/formDesign',
    name:'FormDesign',
    component: (resolve) => require(["@/page/formDesign/index"], resolve),
    redirect: '/baseForm', //      （   ）
    children:[
               {
                 path:'/baseForm',
                 name:'BaseForm',
                 component: (resolve) => require(["@/page/formDesign/baseForm"], resolve)
               }, 
               {
                 path:'/controlAssembly',
                 name:'ControlAssembly',
                 component: (resolve) => require(["@/page/formDesign/controlAssembly"], resolve)
               }, 
               {
                 path:'/processDesign',
                 name:'ProcessDesign',
                 component: (resolve) => require(["@/page/formDesign/ProcessDesign"], resolve)
               },                                   
     ]
},

効果図:
では、実現方法についてお話しします.
ステップ1:
FormDesign.vue

import { mapState } from 'vuex'
export default {
  computed:{
    ...mapState({
        includedArr:state => state.includedArr ,
    })
  },
};

第2部、BaseForm.vue、ControlAssembly.vueとProcessDesign.vue 3ページ、それぞれactivated()メソッドでページnameをキャッシュ
(pushNameToincludedArrは私自身がvuexでincludedArrを修正する方法を定義したものです)

//BaseForm.vue


export default {
  name: 'BaseForm',
  activated(){
    this.$store.commit('pushNameToincludedArr','BaseForm');
  },
};


//ControlAssembly.vue


export default {
  name: 'ControlAssembly',
  activated(){
    this.$store.commit('pushNameToincludedArr','ControlAssembly');
  },
};


//ProcessDesign.vue


export default {
  name: 'ProcessDesign',
  activated(){
    this.$store.commit('pushNameToincludedArr','ProcessDesign');
  },
};

まずstoreを見てみましょう.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {
    //...     
	includedArr:[],
};

const mutations = {
    //...     
	pushNameToincludedArr(state,payload){
		if((state.includedArr).indexOf(payload) == -1){
			(state.includedArr).push(payload)
		}else{
			return
		};
	},

	cleanUpTheincludedArr(state){
		state.includedArr = [];
	},
}

export default new Vuex.Store({
	state,
    mutations
});

最後にmain.jsでは、グローバルなbeforeEachメソッドが定義されています.
main.js

//...     

//  router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router'

//  vuex
import Vuex from 'vuex'
Vue.use(Vuex)
import store from './store'

router.beforeEach((to, from, next) => {
  let addPage = ['BaseFormc','ControlAssembly','ProcessDesign'];
  if (addPage.indexOf(to.name) == -1 ) { //        。
      store.commit('cleanUpTheincludedArr');
  }
  next();
})

//...     

これにより、需要が実現する.
中でもactivated&include&vuex&ルーティングのbeforeEachの使い方については、ネット上の関連資料が多いので、自分で検索して勉強してください.