通过vuex控制vue缓存页面

首先是主要逻辑文件=>vuex页面keepAliveCtrls.js:

const state = {
	include_arr: []
}

const getters = {
	get_clude_arr: state_ => state_.include_arr
}

const mutations = {
	setinclude_arr(state_,data) {
		state_.include_arr = data
	}
}

const actions = {
	add_routes({commit}, data=[]) {
		console.log(state)
		const include_arr = [...state.include_arr];
		if(include_arr.length>=0 && typeof(data) === 'string') {
			if(!include_arr.includes(data)) {
				include_arr.push(data);
				commit('setinclude_arr',include_arr);
			}
		}
	},

	remove_target_route({commit},data) {
		const include_arr = [...state.include_arr];
		if(include_arr.length>0 && typeof(data) === 'string') {
			if(include_arr.includes(data)) {
				include_arr.splice(include_arr.indexOf(data),1);
				commit('setinclude_arr',include_arr);
			}
		}
	},

	remove_all_routes({commit}, data) {
		commit('setinclude_arr',[])
	}
};

export default {
	state,
	mutations,
	getters,
	actions,
};

store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import keepAliveCtrl from './modules/keepAliveCtrls.js'
Vue.use(Vuex)


const store = new Vuex.Store({
  modules:{
    keepAliveCtrl
  },
  strict: process.env.NODE_ENV !== 'production' // 严格模式
})

export default store;

App.vue(在router-view写v-show控制,可以不用在组件文件把组件名写上)

v-show的其他条件视具体情况而定,请自行判断

<template>
	<div id="app">
        {{get_clude_arr}}
		<keep-alive :include="get_clude_arr">
		    <router-view v-show="get_clude_arr.length>0&&$route.name===get_clude_arr[get_clude_arr.length-1]"></router-view>
		</keep-alive>
        <router-view v-show="!(get_clude_arr.length>0&&$route.name===get_clude_arr[get_clude_arr.length-1])"></router-view>
	</div>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
	export default {
        computed:{
            ...mapGetters(['get_clude_arr'])
        },
        mounted() {
            console.log(this.get_clude_arr)
        }
	};
</script>

<style lang="stylus" scoped>
</style>

<template>
	<div id="app">
      {{get_clude_arr}}
		<keep-alive :include="get_clude_arr">
			<router-view></router-view>
		</keep-alive>
	</div>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
	export default {
        computed:{
            ...mapGetters(['get_clude_arr'])
        },
        mounted() {
            console.log(this.get_clude_arr)
        }
	};
</script>

<style lang="stylus" scoped>
</style>

// 注意:若是在keep-alive写:include=get_clude_arr,注意要在组件内写好组件的名称

/*

include：  字符串或正则表达式，只有名称匹配的组件会被缓存
exclude： 字符串或正则表达式，名称匹配的组件不会被缓存》
max：     数字，最多可以缓存多少组件实例

生命周期：
  activated和deactivated会在keep-alive树内所有嵌套的组件中触发
  如：B页面是缓存页面
    当A页面跳到B页面时，B页面的生命周期：activated（可在此时更新数据）
    B页面跳出时，触发deactivated
    B页面自身刷新时，会触发created-mouted-activated

*/

 

想要缓存todo页面,就使用todo页面的路由配置的name值:

<template lang="">
  <div>
    this is login page
    <p @click="aa">app</p>
  </div>
</template>
<script>
	import { mapActions } from "vuex";
	export default {
    name: 'login',
    created() {
      this.remove_target_route('todo')
    },
		methods: {
			...mapActions(["add_routes",'remove_target_route']),
			aa() {
        this.add_routes("todo");
          console.log(this.$store.state.keepAliveCtrl.includeArr)
          this.$router.push({
					name: "todo"
				});
			}
    },
    activated() {
      this.remove_target_route('todo')
    }
	};
</script>
<style lang="stylus"></style>

这样就不必去路由文件配置是否缓存了,而且在路由文件配置是否缓存的参数有局限性,修改在路由钩子中修改还是非常繁琐的,使用vuex能够起到动态控制的效果

 

补充一点小知识:

模块化的vuex的mutations和actions为了方便,可使用的mapMutations,mapActions,但最基础的用法还是要知道的:

this.$store.dispatch('命名空间/actions里的函数名',参数数据)，

this.$store.commit('命名空间/mutations里的函数名',参数数据)