vue动态缓存，keep-alive，vuex

1、实现思路：

• keep-alive include
• 使用keep-alive包裹 router-view，动态改变 缓存的页面

注意：使用keep-alive缓存的vue页面，必须设置name，不设置name的话，使用include默认是缓存的

2、代码

2.1、keep-alive包裹， include过滤，keepList存在的界面进行缓存，不存在的不缓存

<keep-alive :include="keepList">
	<router-view></router-view>
</keep-alive>

<script>
import { mapGetters } from "vuex"

export default {
	data:...
	...
	computed: {
		...mapGetter(["keepList"])
	}
}
</script>

2.2、vuex存储keepList

common.js

const common = {
	state: {
		...
		keepList: ["login","index"]
	},
	mutations: {
		SET_KEEPLIST: (state, keepList) => {
			state.keepList = keepList
		}
	}
}

export default common;

getter.js

const getters = {
	keepList: (state) => state.common.keepList
}
export default getters

index.js

import Vue from "vue"
import Vuex from "vuex"
import common from "./modules/common"

Vue.use(Vuex);
const store = new Vuex.Store({
	modules: {
		common
	},
	getters
})

export default store;

2.3、改变keepList

根据自己需要的逻辑改变keepList
调用vuex方法赋值

...
let keepListTem = ['login']

this.$store.commit("SET_KEEPLIST",  keepListTem)