Me gustaría usar FullCalendar y mantener los eventos en la tienda vuex . Tengo la tienda configurada para los eventos, tengo captadores, mutaciones y una acción para llamar a la API y llenar la tienda.

 // index.js of the store export default createStore({ state () { return { events: [], } }, getters: { events: state => state.events, }, mutations: { setEvents (state, events) { state.events = events }, actions: { fetchEvents({ commit }, fetchInfo) { const result = // ... API call commit('setEvents', result) } } } })

 // calendar.vue <template> <FullCalendar ref="fullCalendar" :options="configOptions"/> </template> <script> // ... omitted imports export default { components: { Calendar, FullCalendar, }, computed: { ...mapGetters(['events']), configOptions () { return { // ... omitted config events: this.events, datesSet: this.handleViewChange } }, }, methods: { ...mapActions({fetchEvents: 'fetchEvents'}), handleViewChange(args) { // ... omitted handling of dates this.fetchEvents(request) }, } } </script>

Ahora quiero obtener nuevos eventos cada vez que cambia la vista. Intenté usar datesSet , que se supone que se llama cada vez que cambian las fechas límite de la vista (algo que no sucede en mi código), pero desafortunadamente también se llama cuando cambian los eventos en la tienda . Lo que significa datesSet sigue llamando a la acción de búsqueda una y otra vez cada vez que termina de representar lo que acaba de devolverse de la búsqueda.

También probé viewClassNames , mismo resultado.

¿Alguien me puede apuntar en la dirección correcta?