当自定义指令遇到keep-alive (vue3)

近期在实现权限指令时,出现了诡异的bug,在切换页面时,传入的权限值是混乱的,导致页面出现丢失按钮的情况。查了下发现是由于开启了keep-alive页面缓存导致的,因此需要在deactivated,activated这两个生命周期对权限指令绑定的值做重置处理

// ==========【 定义表格中操作列的权限 】==========
const initOperationColumnPermission = () => {
	return {
		userDetail: "button:userDetail",
		loginConsole: "button:loginConsole",
		editUser: "button:editUser",
		editPassword: "button:editPassword",
		checkUserFinanceLog: "button:checkUserFinanceLog",
		checkService: "button:checkService",
		setUserDiscount: "button:setUserDiscount",
		getUserMonthOrder: "button:getUserMonthOrder"
	};
};
const operationColumnPermission = ref<any>(initOperationColumnPermission());
// 重置自定义指令绑定的值,避免因为使用了keep-alive而导致数值混乱的问题
onDeactivated(() => {
	operationColumnPermission.value = {};
});
onActivated(() => {
	operationColumnPermission.value = initOperationColumnPermission();
});

猜你喜欢

转载自blog.csdn.net/weixin_45313351/article/details/134412087