Use vuex state store

src/App.vue

@@ -40,20 +40,10 @@ export default {
         4: 'Donnerstag',
         5: 'Freitag',
         6: 'Samstag'
-      },
-      where: 'zentralmensa',
-      when: '' + (new Date().getDay() || 1)
       }
-  },
-  watch: {
-    'where': 'updateRoute',
-    'when': 'updateRoute'
+    }
   },
   methods: {
-    updateRoute () {
-      this.$router.push(`/${this.where}/${this.when}`)
-      window.localStorage.setItem('where', this.where)
-    },
     previousDay () {
       this.when === 1 ? this.when = 6 : this.when--
     },
@@ -67,12 +57,30 @@ export default {
     }
   },
   computed: {
-    today () {
-      return '' + new Date().getDay()
+    where: {
+      get () {
+        return this.$store.state.where
+      },
+      set (value) {
+        this.$store.dispatch('loadMeals', {
+          when: this.when,
+          where: value
+        })
+      }
+    },
+    when: {
+      get () {
+        return this.$store.state.when
+      },
+      set (value) {
+        this.$store.dispatch('loadMeals', {
+          when: value,
+          where: this.where
+        })
+      }
     }
   },
   created () {
-    this.where = window.localStorage.getItem('where') || 'zentralmensa'
     let vm = this
     document.onkeydown = (evt) => {
       evt = evt || window.event

src/components/Mensa.vue

@@ -9,53 +9,16 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'mensa',
-  data () {
-    return {
-      meals: [],
-      date: '',
-      days: [1, 2, 3, 4, 5, 6],
-      dayOfWeek: {
-        1: 'Montag',
-        2: 'Dienstag',
-        3: 'Mittwoch',
-        4: 'Donnerstag',
-        5: 'Freitag',
-        6: 'Samstag'
-      }
-    }
-  },
-  watch: {
-    '$route': function () {
-      if (!this.$route.fullPath.endsWith('/')) {
-        this.$router.replace(this.$route.fullPath + '/')
-      }
-      if (!this.$route.params.tag) {
-        let day = (new Date().getDay() || 1)
-        if (new Date().getHours() > 15) {
-          // show next day
-          ++day
-        }
-        this.$router.push('' + day)
-      }
-      this.loadMeals()
-    }
-  },
-  methods: {
-    loadMeals () {
-      fetch(`/static/${this.$route.params.mensa}.${this.$route.params.tag}.json`)
-      .then(res => res.json())
-        .then(menu => {
-          this.meals = menu.meals
-          this.date = menu.date
+  computed:{
+    ...mapGetters({
+      meals: 'getMeals',
+      date: 'getDate'
     })
   }
-  },
-  created () {
-    this.$router.replace(`/zentralmensa/${new Date().getDay() || 1}`)
-    this.loadMeals()
-  }
 }
 </script>
 <style>

src/store/index.js

@@ -5,9 +5,66 @@ Vue.use(Vuex)
 
 const state = {
   where: 'zentralmensa',
-  day: new Date().getDay() || 1
+  when: new Date().getDay() || 1,
+  meals: {},
+  date: ''
+}
+
+const mutations = {
+  updateWhere(state, where) {
+    state.where = where
+  },
+
+  updateWhen(state, when) {
+    state.when = when
+  },
+
+  updateMeals(state, meals) {
+    state.meals = meals
+  },
+
+  updateDate(state, date) {
+    state.date = date
+  }
+}
+
+const actions = {
+  /**
+   * Loads the meals of the desired day and mensa
+   * @param {Object} payload The payload for this action
+   * @param {string} payload.where The desired Mensa
+   * @param {number} payload.when The desired day
+   */
+  loadMeals({ commit, state }, payload) {
+    commit('updateWhere', payload.where)
+    commit('updateWhen', payload.when)
+    fetch(`/static/${state.where}.${state.when}.json`)
+      .then(res => res.json())
+      .then(menu => {
+        commit('updateMeals', menu.meals)
+        commit('updateDate', menu.date)
+      })
+  }
+}
+
+const getters = {
+  getWhere(state) {
+    return state.where
+  },
+  getWhen(state) {
+    return state.when
+  },
+  getMeals(state) {
+    return state.meals
+  },
+  getDate(state) {
+    return state.date
+  }
 }
 
 export default new Vuex.Store({
-  state
+  state,
+  mutations,
+  actions,
+  getters
 })