本文旨在解决在使用Vue FullCalendar组件时，通过点击按钮一次性加载多个BOM数据到日历中导致的问题。通过分析问题代码，并结合解决方案，提供了一个清晰的步骤，帮助开发者避免数据重复加载，并确保FullCalendar组件的正常使用。
问题分析与解决方案
在使用Vue FullCalendar组件时，如果在点击按钮触发数据加载时，发现数据被重复加载到日历中，这通常是由于监听器（watcher）的重复触发或初始化逻辑不当造成的。在提供的代码中，getBomData 的 watch 监听器，配合 immediate: true 可能会导致在组件挂载时和数据更新时都执行 initializeDraggable() 方法，从而重复初始化拖拽功能，导致数据重复加载。
解决方案是将 watch 监听器中的 initializeDraggable() 调用移除，并在 mounted 钩子函数中手动调用一次，确保只在组件挂载后进行一次初始化。
实现步骤
移除watch监听器：
立即学习
“
前端免费学习笔记（深入）
”；
首先，移除以下代码块：
go语言参考手册 中文CHM版
Go 是一个开源的编程语言，它能让构造简单、可靠且高效的软件变得容易。本文给大家带来Go参考手册，需要的可以来下载！ Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发，后来还加入了Ian Lance Taylor, Russ Cox等人，并最终于2009年11月开源，在2012年早些时候发布了Go 1稳定版本。现在Go的开发已经是完全开放的，并且拥有一个活跃的社区。 Go 语言特色 简洁、快速、安全 并行、有趣、开源 内存管理、v数组安全、编译
下载
这段代码会导致 getBomData 每次变化时都执行 initializeDraggable()，从而重复初始化拖拽功能。
在mounted钩子中调用initializeDraggable：
确保 initializeDraggable() 方法在 mounted 钩子函数中被调用。 检查mounted中是否存在调用，若没有，则添加。
这样可以确保在组件挂载后，拖拽功能只被初始化一次。
代码解释
mounted 钩子函数：
Vue组件生命周期中的一个钩子，在组件挂载到DOM后执行。在这里，我们首先从Vuex store中获取BOM数据，然后初始化FullCalendar的资源，并调用 initializeDraggable() 方法来设置拖拽功能。
initializeDraggable() 方法：
这个方法负责初始化拖拽功能，它会找到DOM中所有的 fc-event 元素（BOM数据），并为它们添加拖拽事件监听器。
$nextTick()：
在DOM更新循环结束之后执行延迟回调。 在数据更新后，使用 $nextTick() 确保DOM已经更新，然后再执行 initializeDraggable()。
完整代码示例（修改后的部分）
注意事项
确保 initializeDraggable() 方法只在组件挂载后调用一次。
如果问题仍然存在，检查 showBom() 方法是否被多次调用，导致数据重复加载。
检查 getBomData 是否被意外修改，导致监听器被多次触发。
总结
通过移除不必要的 watch 监听器，并在 mounted 钩子函数中手动调用 initializeDraggable() 方法，可以有效地解决Vue FullCalendar组件中BOM数据重复加载的问题。 这种方法确保了拖拽功能只在组件挂载后初始化一次，避免了数据重复加载，从而保证了FullCalendar组件的正常使用。 记住，理解Vue组件的生命周期以及如何正确使用监听器是解决此类问题的关键。
watch: {
getBomData: {
handler() {
this.$nextTick(() => {
this.initializeDraggable();
});
},
deep: true,
immediate: true,
},
}async mounted() {
const payload = {
product_unit: this.productUnit,
}
await this.$store.dispatch('getBom', payload)
this.bomDatas = this.getBomData ? [...this.getBomData] : []
this.calendarOptions.resources = this.facilityDatas.map((facility, index) => ({
id: index.toString(),
title: facility.facility_name,
}))
await this.initializeDraggable() // 确保这里调用了 initializeDraggable()
this.fullCalendar = this.$refs.fullCalendar.$refs.calendar
},