Refactored to use routes and App.vue

src/App.vue

@@ -1,15 +1,75 @@
 <template>
-  <!-- Don't drop "q-app" class -->
   <div id="q-app">
-    <router-view></router-view>
+    <q-layout>
+      <nav-header-primary
+        slot="header"
+        class="toolbar dark"
+      ></nav-header-primary>
+
+      <nav-header-secondary
+        slot="header"
+        class="toolbar dark"
+      ></nav-header-secondary>
+
+      <div class="layout-view">
+        <router-view></router-view>
+      </div>
+
+      <nav-footer
+        slot="footer"
+        class="toolbar pink"
+      ></nav-footer>
+    </q-layout>
   </div>
 </template>
 
 <script>
-/*
- * Root component
- */
-export default {}
-</script>
+import { Loading, Dialog } from 'quasar'
+import Vue from 'vue'
+import 'whatwg-fetch'
+import { state, dispatch } from './store'
+import HeaderPrimary from './components/Headerprimary'
+import HeaderSecondary from './components/Headersecondary'
+import Footer from './components/Footer'
 
-<style></style>
+Vue.component('nav-header-primary', HeaderPrimary)
+Vue.component('nav-header-secondary', HeaderSecondary)
+Vue.component('nav-footer', Footer)
+
+function fetchSuccess (data) {
+  dispatch({
+    type: 'SPELLS_RESOLVED',
+    data: {
+      data,
+      loaded: true
+    }
+  })
+}
+
+function fetchFailure (reason) {
+  let message = 'Unable to retrieve spells list'
+  Dialog.create({
+    title: 'Error',
+    message,
+    nobuttons: true
+  })
+  console.error(message, reason)
+}
+
+export default {
+  data () {
+    return { state }
+  },
+  mounted () {
+    if (!this.state.spells.loaded) {
+      Loading.show()
+
+      fetch('./statics/dnd5e.json')
+      .then(response => response.json())
+      .then(fetchSuccess)
+      .catch(fetchFailure)
+      .then(() => { Loading.hide() })
+    }
+  }
+}
+</script>

src/components/Footer.vue

@@ -0,0 +1,43 @@
+<template>
+  <footer>
+    <q-tabs
+      class="pink justified"
+      :refs="$refs"
+      default-tab="tab-all"
+    >
+      <q-tab
+        icon="local_library"
+        route="/"
+        exact
+      >
+        All Spells
+      </q-tab>
+      <q-tab
+        icon="bookmark"
+        route="/my"
+        exact
+      >
+        My Spells
+        <span
+          class="label pointing-left bg-yellow text-dark"
+          v-show="state.chosen.length"
+        >{{state.chosen.length}}</span>
+      </q-tab>
+    </q-tabs>
+  </footer>
+</template>
+
+<script>
+import { state } from '../store'
+
+export default {
+  data () {
+    return { state }
+  }
+}
+</script>
+
+<style scoped lang="stylus">
+  footer .q-tabs
+    width: 100%
+</style>

src/components/Headerprimary.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <q-toolbar-title :padding="0">
+      My Spells v2.0 
+    </q-toolbar-title>
+
+    <button v-on:click="copy">
+      <i>file_download</i>
+      <q-tooltip
+        anchor="bottom right"
+        self="top right"
+      >
+        Export Selected Spells
+      </q-tooltip>
+    </button>
+
+    <button v-on:click="paste">
+      <i>cloud_upload</i>
+      <q-tooltip
+        anchor="bottom right"
+        self="top right"
+      >
+        Import Selected Spells
+      </q-tooltip>
+    </button>
+  </div>
+</template>
+
+<script>
+import { state } from '../store'
+
+export default {
+  data () {
+    return {
+      state
+    }
+  },
+  methods: {
+    copy () {
+      console.log('Copy Chosen!', this.state.chosen)
+    },
+    paste () {
+      console.log('Load Chosen!')
+    }
+  }
+}
+</script>

src/components/Headersecondary.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <q-select
+      type="list"
+      v-model="state.sortBy"
+      :options="sortByOptions"
+    ></q-select>
+
+    <q-search
+      class="dark"
+      v-model="state.search"
+      @input="searchChanged"
+    ></q-search>
+  </div>
+</template>
+
+<script>
+import { state, dispatch } from '../store'
+
+export default {
+  data () {
+    return {
+      state,
+      sortByOptions: [
+        {
+          label: 'Relevance',
+          value: 'sortScore'
+        },
+        {
+          label: 'Name',
+          value: 'name'
+        },
+        {
+          label: 'Level',
+          value: 'level'
+        },
+        {
+          label: 'School',
+          value: 'school'
+        }
+      ]
+    }
+  },
+  methods: {
+    searchChanged (newSearch) {
+      if (newSearch.length >= 3) {
+        this.state.previousSortBy = this.state.sortBy
+        this.state.sortBy = 'sortScore'
+      }
+      else {
+        this.state.sortBy = this.state.previousSortBy
+      }
+
+      dispatch({ type: 'SEARCH_CHANGED' })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/components/Index.vue

@@ -1,187 +1,21 @@
 <template>
-  <q-layout>
-    <div slot="header" class="toolbar dark">
-      <q-toolbar-title :padding="0">
-        My Spells v2.0 
-      </q-toolbar-title>
-
-      <button v-on:click="copy">
-        <i>file_download</i>
-        <q-tooltip
-          anchor="bottom right"
-          self="top right"
-        >
-          Export Selected Spells
-        </q-tooltip>
-      </button>
-
-      <button v-on:click="paste">
-        <i>cloud_upload</i>
-        <q-tooltip
-          anchor="bottom right"
-          self="top right"
-        >
-          Import Selected Spells
-        </q-tooltip>
-      </button>
-    </div>
-
-    <div slot="header" class="toolbar dark">
-      <q-select
-        type="list"
-        v-model="sortBy"
-        :options="sortByOptions"
-      ></q-select>
-
-      <q-search
-        class="dark"
-        v-model="search"
-        @input="searchChanged"
-      ></q-search>
-    </div>
-
-    <div class="layout-view">
-      <section ref="tab-all">
-        <spell-list
-          :spells="state.spells.data"
-          :search="search"
-          :sortBy="sortBy"
-        ></spell-list>
-      </section>
-
-      <section ref="tab-my">
-        <spell-list
-          v-if="mySpells.length"
-          :spells="mySpells"
-          :search="search"
-          :sortBy="sortBy"
-        ></spell-list>
-        <div v-else>None :D</div>
-      </section>
-    </div>
-
-    <footer slot="footer" class="toolbar pink">
-      <q-tabs
-        class="pink justified"
-        :refs="$refs"
-        default-tab="tab-all"
-      >
-        <q-tab name="tab-all" icon="local_library">
-          All Spells
-        </q-tab>
-        <q-tab name="tab-my" icon="bookmark">
-          My Spells
-          <span
-            class="label pointing-left bg-yellow text-dark"
-            v-show="mySpells.length"
-          >{{mySpells.length}}</span>
-        </q-tab>
-      </q-tabs>
-    </footer>
-  </q-layout>
+  <main>
+    <spell-list
+      :spells="state.spells.data"
+    ></spell-list>
+  </main>
 </template>
 
 <script>
-import { Loading, Dialog } from 'quasar'
 import Vue from 'vue'
-import 'whatwg-fetch'
-import { state, dispatch } from '../store'
 import SpellList from './Spelllist'
+import { state } from '../store'
 
 Vue.component('spell-list', SpellList)
 
-function fetchSuccess (data) {
-  dispatch({
-    type: 'SPELLS_RESOLVED',
-    data: {
-      data,
-      loaded: true
-    }
-  })
-}
-
-function fetchFailure (reason) {
-  let message = 'Unable to retrieve spells list'
-  Dialog.create({
-    title: 'Error',
-    message,
-    nobuttons: true
-  })
-  console.error(message, reason)
-}
-
 export default {
   data () {
-    return {
-      state,
-      search: '',
-      sortBy: 'name',
-      previousSortBy: 'name',
-      sortByOptions: [
-        {
-          label: 'Relevance',
-          value: 'sortScore'
-        },
-        {
-          label: 'Name',
-          value: 'name'
-        },
-        {
-          label: 'Level',
-          value: 'level'
-        },
-        {
-          label: 'School',
-          value: 'school'
-        }
-      ]
-    }
-  },
-  computed: {
-    mySpells () {
-      if (!this.state.spells.loaded || this.state.chosen.length === 0) {
-        return []
-      }
-
-      return this.state.chosen.map(chosen => {
-        return this.state.spells.data.find(spell => {
-          return spell.name === chosen
-        })
-      })
-    }
-  },
-  mounted () {
-    if (!this.state.spells.loaded) {
-      Loading.show()
-
-      fetch('./statics/dnd5e.json')
-      .then(response => response.json())
-      .then(fetchSuccess)
-      .catch(fetchFailure)
-      .then(() => { Loading.hide() })
-    }
-  },
-  methods: {
-    copy () {
-      console.log('Copy Chosen!', this.state.chosen)
-    },
-    paste () {
-      console.log('Load Chosen!')
-    },
-    searchChanged (newSearch) {
-      if (newSearch.length >= 3) {
-        this.previousSortBy = this.sortBy
-        this.sortBy = 'sortScore'
-      }
-      else {
-        this.sortBy = this.previousSortBy
-      }
-    }
+    return { state }
   }
 }
 </script>
-
-<style scoped lang="stylus">
-  footer .q-tabs
-    width: 100%
-</style>

src/components/Myspells.vue

@@ -0,0 +1,35 @@
+<template>
+  <main>
+    <spell-list
+      v-if="mySpells.length"
+      :spells="mySpells"
+    ></spell-list>
+  </main>
+</template>
+
+<script>
+import Vue from 'vue'
+import SpellList from './Spelllist'
+import { state } from '../store'
+
+Vue.component('spell-list', SpellList)
+
+export default {
+  data () {
+    return { state }
+  },
+  computed: {
+    mySpells () {
+      if (!this.state.spells.loaded || this.state.chosen.length === 0) {
+        return []
+      }
+
+      return this.state.chosen.map(chosen => {
+        return this.state.spells.data.find(spell => {
+          return spell.name === chosen
+        })
+      })
+    }
+  }
+}
+</script>

src/components/Spelllist.vue

@@ -18,42 +18,31 @@
 import Vue from 'vue'
 import Query from '../query'
 import SpellItem from './Spellitem'
+import { state } from '../store'
 
 Vue.component('spell-item', SpellItem)
 
 export default {
-  props: [
-    'spells',
-    'search',
-    'sortBy'
-  ],
   data () {
-    return {
-      loadedPage: 1
-    }
+    return { state }
   },
+  props: [
+    'spells'
+  ],
   computed: {
     filteredSpells () {
       return new Query(this.spells)
-      .search('name', this.search)
-      .sort(this.sortBy)
-      .paginate(1, this.loadedPage * 20)
+      .search('name', this.state.search)
+      .sort(this.state.sortBy)
+      .paginate(1, this.state.loadedPagination * 20)
       .results
     }
   },
   methods: {
     loadMore (index, done) {
-      this.loadedPage += 1
+      this.state.loadedPagination += 1
       done()
     }
-  },
-  watch: {
-    sortBy (newSort) {
-      console.log(newSort)
-    },
-    search () {
-      this.loadedPage = 1
-    }
   }
 }
 </script>

src/router.js

@@ -22,6 +22,7 @@ export default new VueRouter({
 
   routes: [
     { path: '/', component: load('Index') }, // Default
+    { path: '/my', component: load('Myspells') },
     { path: '*', component: load('Error404') } // Not found
   ]
 })

src/store.js

@@ -3,7 +3,11 @@ export let state = {
     loaded: false,
     data: []
   },
-  chosen: []
+  chosen: [],
+  search: '',
+  sortBy: 'name',
+  previousSortBy: 'name',
+  loadedPagination: 1
 }
 
 export function dispatch (action) {
@@ -20,10 +24,10 @@ export function dispatch (action) {
         if (index >= 0) state.chosen.splice(index, 1)
       }
       break
+    case 'SEARCH_CHANGED':
+      state.loadedPagination = 1
+      break
   }
 }
 
-export default {
-  state,
-  dispatch
-}
+export default { state, dispatch }