keep-alive index page

layouts/default.vue

@@ -4,7 +4,7 @@
     <v-main>
       <Snackbar/>
       <Confirm/>
-        <nuxt :keep-alive='$route.name === "index"'/>
+      <nuxt keep-alive :keep-alive-props="{include: ['Index']}"/>
     </v-main>
     <Footer/>
 

pages/index.vue

@@ -21,27 +21,35 @@ export default {
   name: 'Index',
   components: { Event, Announcement },
   middleware: 'setup',
-  async fetch () {
-    return this.getEvents()
+  fetch () {
+    return this.getEvents({
+      start: this.start,
+      end: this.end
+    })
   },
   activated() {
-    if (this.$fetchState.timestamp <= Date.now() - 60000) {
-      this.$fetch();
+    if (!this.isCurrentMonth) {
+      this.start = dayjs().startOf('month').unix()
+      this.end = null
+      this.$fetch()
+      this.isCurrentMonth = true
+      return
+    }
+    if (this.$fetchState.timestamp <= (Date.now() - 60000)) {
+      this.$fetch()
     }
   },
-  data ({ $store }) {
+  data () {
     return {
       mdiMagnify, mdiCloseCircle,
       isCurrentMonth: true,
       now: dayjs().unix(),
-      date: dayjs.tz().format('YYYY-MM-DD'),
+      // date: dayjs.tz().format('YYYY-MM-DD'),
       start: dayjs().startOf('month').unix(),
       end: null,
-      searching: false,
       tmpEvents: [],
       selectedDay: null,
       storeUnsubscribe: null
-
     }
   },
   head () {
@@ -80,7 +88,7 @@ export default {
       }
     }
   },
-  mounted () {
+  created () {
     this.$root.$on('dayclick', this.dayChange)
     this.$root.$on('monthchange', this.monthChange)
     this.storeUnsubscribe = this.$store.subscribeAction( { after: (action, state) => {
@@ -88,7 +96,8 @@ export default {
         if (this.filter.query && this.filter.query.length > 2) {
           this.search()
         } else {
-          this.updateEvents()
+          this.tmpEvents = []
+          this.$fetch()
         }
       }
     }})
@@ -109,34 +118,28 @@ export default {
         show_multidate: this.filter.show_multidate,
         query: this.filter.query
       })
-    }, 100),
-    updateEvents () {
-      return this.getEvents({
-        start: this.start,
-        end: this.end
-      })
-    },
+    }, 200),
     async monthChange ({ year, month }) {
       this.$nuxt.$loading.start()
-      this.$nextTick( async () => {
+      let isCurrentMonth
 
-        // unselect current selected day
-        this.selectedDay = null
+      // unselect current selected day
+      this.selectedDay = null
 
-        // check if current month is selected
-        if (month - 1 === dayjs.tz().month() && year === dayjs.tz().year()) {
-          this.isCurrentMonth = true
-          this.start = dayjs().startOf('month').unix()
-          this.date = dayjs.tz().format('YYYY-MM-DD')
-        } else {
-          this.isCurrentMonth = false
-          this.date = ''
-          this.start = dayjs().year(year).month(month - 1).startOf('month').unix() // .startOf('week').unix()
-        }
-        this.end = dayjs().year(year).month(month).endOf('month').unix() // .endOf('week').unix()
-        await this.updateEvents()
-        this.$nuxt.$loading.finish()
-      })
+      // check if current month is selected
+      if (month - 1 === dayjs.tz().month() && year === dayjs.tz().year()) {
+        isCurrentMonth = true
+        this.start = dayjs().startOf('month').unix()
+        // this.date = dayjs.tz().format('YYYY-MM-DD')
+      } else {
+        isCurrentMonth = false
+        // this.date = ''
+        this.start = dayjs().year(year).month(month - 1).startOf('month').unix() // .startOf('week').unix()
+      }
+      this.end = dayjs().year(year).month(month).endOf('month').unix() // .endOf('week').unix()
+      await this.$fetch()
+      this.$nuxt.$loading.finish()
+      this.$nextTick( () => this.isCurrentMonth = isCurrentMonth)
 
     },
     dayChange (day) {

store/index.js

@@ -26,7 +26,7 @@ export const state = () => ({
   filter: {
     query: '',
     show_recurrent: null,
-    show_multidate: null
+    show_multidate: null,
   },
   announcements: [],
   events: []
@@ -43,7 +43,7 @@ export const mutations = {
     state.announcements = announcements
   },
   setEvents (state, events) {
-    state.events = events
+    state.events = Object.freeze(events)
   },
   setFilter (state, { type, value }) {
     state.filter[type] = value
@@ -84,6 +84,5 @@ export const actions = {
       show_multidate: state.filter.show_multidate
     })
     commit('setEvents', events)
-    return events
   }
 }