use localSetting to store a global state of user choices

components/ThemeView.vue

@@ -1,48 +1,31 @@
 <template lang="pug">
-div.p-0.m-0.d-flex.justify-end(:key='reload')
-  v-icon.ml-5(@click='_is_dark()' v-text='mdiContrastCircle')
-  v-icon.ml-5(@click='_hide_thumbs()' v-if="!hide_thumbs" v-text='!hide_thumbs_icon ?  mdiViewList : mdiViewModule')
+div.p-0.m-0.d-flex.justify-end
+  v-icon.ml-5(@click='toggleDark' v-text='mdiContrastCircle')
+  v-icon.ml-5(@click='toggleHideThumbs' v-text='hide_thumbs ?  mdiViewList : mdiViewModule')
 
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { mdiViewModule, mdiViewList, mdiContrastCircle } from '@mdi/js'
 
 export default {
   name: 'ThemeView',
-  data ({ $store }) {
-    return {
-      mdiViewModule, mdiViewList, mdiContrastCircle,
-      hide_thumbs: $store.state.settings.hide_thumbs,
-      hide_thumbs_icon: $store.state.settings.hide_thumbs || this.$cookies.get('theme.hide_thumbs'),
-      reload: 0
-    }
+  data () {
+    return { mdiViewModule, mdiViewList, mdiContrastCircle }
+  },
+  computed: {
+    ...mapGetters(['hide_thumbs', 'is_dark']),
   },
   methods: {
-    ...mapState(['settings']),
-    async _is_dark() {
+    ...mapActions(['setLocalSetting']),
+    async toggleDark() {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark
-      await this.$cookies.set('theme.is_dark', this.$vuetify.theme.dark, {
-        path: '/',
-        maxAge: 60 * 60 * 24 * 7
-      })
-    },
-    async _hide_thumbs() {
-      let theme_hide_thumbs = await this.$cookies.get('theme.hide_thumbs')
-      if (theme_hide_thumbs != null) {
-        theme_hide_thumbs = !theme_hide_thumbs
-      } else {
-        theme_hide_thumbs = !this.settings.hide_thumbs
-      }
-      await this.$cookies.set('theme.hide_thumbs', theme_hide_thumbs, {
-        path: '/',
-        maxAge: 60 * 60 * 24 * 7
-      })
-      this.hide_thumbs_icon = theme_hide_thumbs
-      this.reload++
-      this.$root.$emit('layout_loaded', true)
+      this.setLocalSetting({ key: 'theme.is_dark', value: !this.is_dark })
     },
+    async toggleHideThumbs() {
+      this.setLocalSetting({ key: 'hide_thumbs', value: !this.hide_thumbs })
+    }
   }
 }
 </script>