Localstorage for chosen spells

src/App.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { Loading, Dialog } from 'quasar'
+import { LocalStorage, Loading, Dialog } from 'quasar'
 import Vue from 'vue'
 import 'whatwg-fetch'
 import { state, dispatch } from './store'
@@ -49,20 +49,30 @@ function fetchFailure (reason) {
   console.error(message, reason)
 }
 
-export default {
-  data () {
-    return { state }
-  },
-  mounted () {
-    if (!this.state.spells.loaded) {
-      Loading.show()
-
+function fetchSpells () {
   fetch('./statics/dnd5e.json')
   .then(response => response.json())
   .then(fetchSuccess)
   .catch(fetchFailure)
   .then(() => { Loading.hide() })
 }
+
+export default {
+  data () {
+    return { state }
+  },
+  mounted () {
+    if (LocalStorage.has('chosen')) {
+      dispatch({
+        type: 'LOAD_LOCAL_CHOSEN'
+      })
+    }
+
+    if (!this.state.spells.loaded) {
+      Loading.show()
+
+      fetchSpells()
+    }
   }
 }
 </script>

src/store.js

@@ -1,3 +1,5 @@
+import { LocalStorage } from 'quasar'
+
 export let state = {
   spells: {
     loaded: false,
@@ -15,6 +17,9 @@ export function dispatch (action) {
     case 'SPELLS_RESOLVED':
       state.spells = action.data
       break
+    case 'LOAD_LOCAL_CHOSEN' :
+      state.chosen = LocalStorage.get.item('chosen').split(',')
+      break
     case 'CHANGE_CHOSEN':
       if (action.data.want) {
         state.chosen.push(action.data.name)
@@ -23,6 +28,13 @@ export function dispatch (action) {
         let index = state.chosen.indexOf(action.data.name)
         if (index >= 0) state.chosen.splice(index, 1)
       }
+
+      if (state.chosen.length) {
+        LocalStorage.set('chosen', state.chosen.join(','))
+      }
+      else {
+        LocalStorage.remove('chosen')
+      }
       break
     case 'SEARCH_CHANGED':
       state.loadedPagination = 1