Vuex中存储的事件无法在FullCalendar组件渲染的问题排查求助

Hey Lucas, I see you've got events showing up in Vue DevTools and console logs, but they're not appearing on your FullCalendar—let's get this sorted out!

The Core Issue: Missing Event Binding in FullCalendar Config #

Looking at your code, the main problem is that your FullCalendar component isn't actually connected to the Vuex-stored events data. Right now, you're passing calendarPlugins to the :options prop, but that should be a full configuration object that includes your events source.

Step-by-Step Fixes #

1. Create a Proper Calendar Configuration Object
   Update your computed properties to include a calendarOptions object that ties your Vuex events to the calendar:

   computed: {
     ...mapGetters(["events"]),
     calendarOptions() {
       return {
         // Make sure you've imported and included necessary plugins (like dayGridPlugin, interactionPlugin)
         plugins: [dayGridPlugin, interactionPlugin],
         headerToolbar: this.headerToolbar,
         // Bind the calendar's events directly to your Vuex getter
         events: this.events,
         // Optional: Move your dateClick handler into the config (or keep it in methods)
         dateClick: this.handleDateClick
       };
     }
   }
   

2. Update the FullCalendar Component Template
   Point the component to your new configuration object instead of the plugin array:

   <Fullcalendar :options="calendarOptions">
     <template #eventContent="{ timeText, event }">
       <b>{{ timeText }}</b>
       <i>{{ event.title }}</i>
     </template>
   </Fullcalendar>
   

3. Double-Check Vuex Mutation & Getter
   Ensure your Vuex store is correctly updating and returning the events array:

   • Mutation (should push new events to the state array):

     mutations: {
       addEvent(state, newEvent) {
         state.events.push(newEvent);
       }
     }
     

   • Getter (should return the full events array):

     getters: {
       events: state => state.events
     }
     

4. Verify Plugin Imports
   Don't forget to import and register required FullCalendar plugins in your component:

   import { FullCalendar } from '@fullcalendar/vue3';
   import dayGridPlugin from '@fullcalendar/daygrid';
   import interactionPlugin from '@fullcalendar/interaction';
   

Why This Works #

By binding this.events (your Vuex getter) to the events property in the calendar options, FullCalendar will automatically react to changes in the Vuex state. When you commit the addEvent mutation, the computed events getter updates, and FullCalendar picks up the new event to render immediately.

内容的提问来源于stack exchange，提问作者Lucas Marra