I would like to use FullCalendar and keep the events in the vuex store. I have the store set up for the events, I have getters, mutations and an action to call the api and populate the store.

// 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>

Now I want to fetch new events every time the view changes. I have tried to use datesSet, which is supposed to be called every time the bounding dates of the view change (something that doesn't happen in my code), but unfortunately it's also called when the events in the store change. Meaning datesSet keeps calling the fetch action over and over every times it's finished rendering what just got returned from the fetch.

I have also tried viewClassNames, same result.

Can someone point me in the right direction?