:bug: wrapped watchers in single vue to stop firing so often | addresses #75

vue-theme/src/components/hero.vue

 <template lang="pug">
-.hero.w-max.f-col(v-if="showHero && !loading")
+.hero.w-max.f-col(v-if="heroUrl && !loading")
     .tint.w-max
+    // youTube thumb with text and embedded video
     .hero--video.w-max(v-if="heroType === 'video'")
         iframe(
             v-if="isPlaying"
         .blank.f-col(v-else)
             .hero--image--overlay.w-max.f-col
                 h2.t-up.t-cntr(v-if="heroText") {{ heroText }}
-            img.w-max(:src="getThumbnailFromYt(showHero)" alt="hero alt image")
+            img.w-max(:src="getThumbnailFromYt(heroUrl)" alt="hero youTube image")
             button(v-if="showPlaybutton" @click="isPlaying = true").z-top
-
+    // Featured image with text
     .hero--image.w-max(v-else-if="heroType === 'image'")
         .hero--image--overlay.w-max.f-col
             h2.t-up.t-cntr(v-html="heroText")
-        img.w-max(:src="showHero" alt="hero alt image")
-
+        img.w-max(:src="heroUrl" alt="hero alt image")
+    // Blank just text
     .hero--image(v-else)
         .hero--image--overlay.w-max.f-col
             div(v-html="heroText")
-.hero.w-max.f-col(v-else-if="loading" style="justify-content: center !important;")
+
+.hero.loading.w-max.f-col(v-else-if="heroUrl && loading")
     .tint.w-max
-    p loading...
+    p loading... show hero: {{heroUrl}}
 </template>
 
 <script>
     },
     computed: {
         ...mapState({
-            showHero: state => state.hero.url,
+            heroUrl: state => state.hero.url,
             heroText: state => state.hero.text,
             loading: state => state.loading,
             heroType: state => state.hero.type,
             showPlaybutton: state => state.hero.playbutton,
         }),
         heroIdFromUrl() {
-            const url = this.showHero.split('/')
+            const url = this.heroUrl.split('/')
             return url.pop()
         },
     },
             this.$store.commit('CLEAR_HERO')
         },
         heroHeight() {
-            if (!this.showHero) return
+            if (!this.heroUrl) return
             Object.assign(this.$el.style, { height: this.heroHeight + 'px' })
         },
     },
     position: relative
     overflow: hidden
     justify-content: flex-start !important
+    &.loading
+        justify-content: center !important
     .tint
         position: absolute
         height: 100%
             /* color: $cia_white */
             position: absolute
             margin: 19% 0
-            h2 
+            h2
                 /* need better responsive solution for heading size  */
                 font-size: 3vw
                 color: $cia_white
         height: 100%
         position: relative
         z-index: 10002
-        
+
     .blank
         position: absolute
         height: inherit
         width: inherit
 
-        button 
+        button
             position: absolute
             min-height: $ms-7
             min-width: $ms-7
             background-color: rgba(170,17,0,0.4)
             border-radius: 50%
             border: 2px white solid
-            &:hover 
+            &:hover
                 border: 2px #DDD solid
                 background-color: rgba(170,170,170,0.7)
-            &:after 
+            &:after
                 content: ""
                 position: absolute
                 top: 30%
                 border-width: 1em 0 1em 1.6em
                 border-color: transparent transparent transparent white
 
-@media (min-width: $medium)     
-    button 
+@media (min-width: $medium)
+    button
         height: $ms-9
         width: $ms-9
         border-width: 3px
-        &:after 
+        &:after
             top: 18%
             left: 30%
             border-width: 1.5em 0 1.5em 2.5em
 
-    .hero 
+    .hero
         min-height: 50vh
         .embedded
             min-height: 50vh

vue-theme/src/pages/list.vue

                       .split('/')
                       .filter(p => p)
                       .pop()
-            // !: BUG
-            // if (Object.values(sortTypes).includes(sort)) {
-            //     console.log('trying to sort by:', sort)
-            //     console.log(
-            //         `sortTypes includes ${sort}:`,
-            //         Object.values(sortTypes).includes(sort),
-            //     )
-            // }
 
-            if (!Object.values(sortTypes).includes(sort)) {
-                console.log('Sort not found:', sort)
-                sort = null
-            }
+            // console.log('Gettings posts:', this.type)
+            // if (!Object.values(sortTypes).includes(sort)) {
+            //     console.log('Sort not found:', sort)
+            //     sort = null
+            // }
 
             // Don't dispatch if there's no type
             if (this.type && this.dispatchName) {
-                console.log('Gettings posts:', this.type, this.dispatchName)
                 this.$store.dispatch(this.dispatchName, sort)
 
                 if (this.type == 'events') {
             if (!this['allPagesLoaded']) {
                 await this.$store.dispatch('getAllPages')
             }
+
+            // We always set a hero no matter what
+            // Because the hero component will deal
+            // with how to render based on hero.url
             const page = this.allPages[type]
-            if (!page) return
 
             let json = { url: page.featured, heroType: 'image' }
             if (
             }
             // Set the hero text to the post title or excerpt
             json.text = page && page.excerpt ? page.excerpt : page.title
-
             this.$store.commit('SET_HERO', json)
         },
         scrollTo(hashtag) {
         },
     },
     watch: {
-        async $route(to, from) {
-            // console.log(this.sidebar)
+        posts() {
+            this.checkAndSetHero(this.type)
+        },
+        $route(to, from) {
             let type = convertTitleCase(this.type)
             let sort = to.path
                 .split('/')
                 .filter(p => p)
                 .pop()
-            this.checkAndSetHero(this.type)
 
-            // console.log('---', sort, type)
-            // console.log(`${from.path}>>>${to.path}`)
             if (!Object.values(sortTypes).includes(sort)) {
                 console.log('sort not found:', sort)
                 sort = null
             }
-            // console.log('---', sort, type)
 
             if (!this[`all${type}Loaded`] || sort) this.getPosts()
         },

vue-theme/src/pages/single.vue

          */
         checkAndSetHero(post) {
             if (!post) return
-
             let json = { url: post.featured, heroType: 'image' }
             if (
                 post.hero &&
             }
             // Set the hero text to the post title
             json.text = post.title
-
             this.$store.commit('SET_HERO', json)
         },
 
     },
     watch: {
         post(newVal, oldVal) {
-            this.checkAndSetHero(this.post)
+            // Prevent loading single post when
+            // navigating AWAY from the page
+            if (!oldVal) {
+                this.checkAndSetHero(newVal)
+            }
         },
-        $route(newVal, oldVal) {
-            this.loadPostData()
+        $route(to, from) {
+            // Only load post data when
+            //  navigating TO a single page
+            if (to.fullPath.split('/').filter(p => p).length > 1) {
+                this.loadPostData()
+            }
         },
     },
     mounted() {

vue-theme/src/store/index.js

     hero: {
         url: null,
         type: null,
-        text: 'sample hero text',
+        text: 'sample hero text', // Does this ever display?
         playbutton: true,
     },
     currentGallery: null,
 
 const mutations = {
     SET_HERO(state, hero) {
-        if (!hero) {
-            state.loading = false
-            return
-        }
-
-        if (hero.url) {
+        if (!hero.url) {
+            console.warn('No hero to set')
+            state.hero.url = null
+            state.hero.type = null
+            state.hero.text = ''
+            state.hero.playbutton = false
+        } else {
+            console.warn('Setting hero', hero)
             state.hero.text = hero.text
             state.hero.url = hero.url
             state.hero.type = hero.heroType
 
             state.hero.playbutton = hero.heroType === 'video' ? true : false
-        } else {
-            console.warn('No hero to set')
-            state.hero.url = hero.url
-            state.hero.type = hero.heroType
-            state.hero.text = ''
-            state.hero.playbutton = false
         }
         state.loading = false
     },

vue-theme/src/store/modules/artist.js

         })
     },
     getSingleArtist({ commit }, id) {
-        // console.log('getting single Artist...')
-        commit('CLEAR_SINGLE_ARTIST')
+        commit('CLEAR_SINGLE_ARTISTS')
         commit('ARTISTS_LOADED', false)
         api.getSingleType('artists', id, artist => {
             commit('STORE_FETCHED_SINGLE_ARTIST', artist)
     CLEAR_ARTISTS(state) {
         state.all = []
     },
-    CLEAR_SINGLE_ARTIST(state) {
+    CLEAR_SINGLE_ARTISTS(state) {
         state.singleArtist = null
     },
     ARTISTS_LOADED(state, val) {

vue-theme/src/store/modules/episode.js

         })
     },
     getSingleEpisode({ commit }, id) {
-        commit('CLEAR_SINGLE_EPISODE')
+        console.log('clearing single ep from getSingle')
+        commit('CLEAR_SINGLE_EPISODES')
         commit('EPISODES_LOADED', false)
         api.getSingleType('episodes', id, episode => {
             commit('STORE_FETCHED_SINGLE_EPISODE', episode)
     CLEAR_EPISODES(state) {
         state.all = []
     },
-    CLEAR_SINGLE_EPISODE(state) {
-        state.episode = null
+    CLEAR_SINGLE_EPISODES(state) {
+        state.singleEpisode = null
     },
     EPISODES_LOADED(state, val) {
         state.loaded = val

vue-theme/src/store/modules/event.js

         })
     },
     getSingleEvent({ commit }, id) {
-        commit('CLEAR_SINGLE_EVENT')
+        commit('CLEAR_SINGLE_EVENTS')
         commit('EVENTS_LOADED', false)
         api.getSingleType('events', id, event => {
             commit('STORE_FETCHED_SINGLE_EVENT', event)
     CLEAR_EVENTS(state) {
         state.all = []
     },
-    CLEAR_SINGLE_EVENT(state) {
+    CLEAR_SINGLE_EVENTS(state) {
         state.singleEvent = null
     },
     EVENTS_LOADED(state, val) {

vue-theme/src/store/modules/exhibition.js

         })
     },
     getSingleExhibition({ commit }, id) {
-        commit('CLEAR_SINGLE_EXHIBITION')
+        commit('CLEAR_SINGLE_EXHIBITIONS')
         commit('EXHIBITIONS_LOADED', false)
         api.getSingleType('exhibitions', id, exhibition => {
             commit('STORE_FETCHED_SINGLE_EXHIBITION', exhibition)
     CLEAR_EXHIBITIONS(state) {
         state.all = []
     },
-    CLEAR_SINGLE_EXHIBITION(state) {
+    CLEAR_SINGLE_EXHIBITIONS(state) {
         state.singleExhibition = null
     },
     EXHIBITIONS_LOADED(state, val) {

vue-theme/src/store/modules/page.js

 const state = {
     all: [],
     loaded: false,
-    singlePage: null
+    singlePage: null,
 }
 
 // getters

vue-theme/src/store/modules/post.js

         })
     },
     getSinglePost({ commit }, id) {
-        commit('CLEAR_SINGLE_POST')
+        commit('CLEAR_SINGLE_POSTS')
         commit('POSTS_LOADED', false)
         api.getSingleType('posts', id, post => {
             commit('STORE_FETCHED_SINGLE_POST', post)
     CLEAR_POSTS(state) {
         state.all = []
     },
-    CLEAR_SINGLE_POST(state) {
+    CLEAR_SINGLE_POSTS(state) {
         state.singlePost = null
     },
     POSTS_LOADED(state, val) {