Proper dispatch events, error handling

src/components/Index.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script>
-import { Loading } from 'quasar'
+import { Loading, Dialog } from 'quasar'
 import Vue from 'vue'
-import { state } from '../store'
+import { state, dispatch } from '../store'
 import SpellList from './Spelllist'
 import 'whatwg-fetch'
 
@@ -30,18 +30,29 @@ export default {
   mounted () {
     if (this.state.spells.loaded === false) {
       Loading.show()
-    }
 
-    fetch('./statics/dnd5e.json')
+      fetch('./statics/dnd5e.json')
-    .then(response => response.json())
+      .then(response => response.json())
-    .then(spells => {
+      .then(spells => {
-      this.state.spells = {
+        dispatch({
-        loaded: true,
+          type: 'SPELLS_RESOLVED',
-        data: spells
+          data: {
-      }
+            loaded: true,
-      Loading.hide()
+            data: spells
-    })
+          }
-    .catch(reason => console.error('Unable to retrieve spells list:', reason))
+        })
+      })
+      .catch(reason => {
+        let message = 'Unable to retrieve spells list'
+        Dialog.create({
+          title: 'Error',
+          message,
+          nobuttons: true
+        })
+        console.error(message, reason)
+      })
+      .then(() => { Loading.hide() })
+    }
   }
 }
 </script>

src/store.js

@@ -4,3 +4,16 @@ export let state = {
     data: []
   }
 }
+
+export function dispatch (action) {
+  switch (action.type) {
+    case 'SPELLS_RESOLVED':
+      state.spells = action.data
+      break
+  }
+}
+
+export default {
+  state,
+  dispatch
+}