feat: working hero changes between pages

vue-theme/src/pages/list.vue

@@ -57,12 +57,17 @@ export default {
             return this.$route.params.type ? this.$route.params.type : this.$route.fullPath.slice(1)
         },
         posts() {
-            let type = this.type.charAt(0).toUpperCase() + this.type.slice(1)
+            let type = this.convertTitleCase(this.type)
             return this[`all${type}`]
         },
     },
+    methods: {
+        convertTitleCase(type) {
+            return type.charAt(0).toUpperCase() + type.slice(1)
+        }
+    },
     mounted() {
-        let type = this.type.charAt(0).toUpperCase() + this.type.slice(1)
+        let type = this.convertTitleCase(this.type)
         
         if(this.sortBy) {
             // TODO: Make a sorted call instead
@@ -70,6 +75,15 @@ export default {
         } else {
             this.$store.dispatch(`getAll${type}`)
         }
+        this.$store.commit('SET_HERO', type)
+    },
+    watch: {
+        $route(to, from){
+            let type = this.convertTitleCase(to.path.slice(1))
+            if(this.$store.state.hero.url !== type) {
+                this.$store.commit('SET_HERO', type)
+            }
+        }
     }
 }
 </script>

vue-theme/src/pages/single.vue

@@ -80,6 +80,13 @@ export default {
                     )
                 }
             })
+        },
+        checkAndSetHero(posts) {
+            const post = posts[this.$route.params.slug]
+            if(post && post.hero){
+                const json = JSON.parse(post.hero)
+                this.$store.commit('SET_HERO', json)
+            }
         }
     },
     watch: {
@@ -87,6 +94,8 @@ export default {
             // Loads images from the DOM
             this.checkForImages(newVal)
             
+            this.checkAndSetHero(newVal)
+            
             // Gottas be on the next render tick
             this.$nextTick(() => {
                 let gallery
@@ -101,6 +110,7 @@ export default {
                     item.addEventListener('mouseup', event => { this.fullscreengallery = i })
                 })
             })
+            
         }
     },
     created() {

vue-theme/src/store/index.js

@@ -26,10 +26,20 @@ const state = {
   },
   view: 'list'
 }
+const mutations = {
+  SET_HERO(state, hero) {
+    if (hero.url) {
+      state.hero.text = state.hero.url = hero.url
+    } else {
+      state.hero.text = hero
+    }
+  },
+}
 
 export default new Vuex.Store({
   actions,
   getters,
+  mutations,
   state,
   modules: {
       post,