save settings to localstorage

src/App.vue

@@ -8,6 +8,8 @@ import SettingsMenu from './components/SettingsMenu.vue'
 import type { Activity } from './types.ts'
 import { defineComponent } from 'vue'
 
+import { useStore } from '@/store'
+
 export default defineComponent({
   data() {
     return {
@@ -18,6 +20,9 @@ export default defineComponent({
       showSettings: false
     }
   },
+  beforeMount() {
+    useStore().commit('init')
+  },
   mounted() {
     let a = localStorage.getItem('activities')
     if (a != null) {

src/components/SettingsMenu.vue

@@ -9,7 +9,7 @@ export default defineComponent({
       timeAsButton: false
     }
   },
-  onMount() {
+  created() {
     this.timeAsButton = this.settings.state.timeAsButton
   },
   emits: ['close'],
@@ -41,7 +41,7 @@ export default defineComponent({
           <label class="inline-flex items-center cursor-pointer">
             <input
               type="checkbox"
-              :value="timeAsButton"
+              :checked="timeAsButton"
               @click="toggleSettings()"
               class="sr-only peer"
             />

src/main.ts

@@ -3,4 +3,9 @@ import App from './App.vue'
 import './index.css'
 import { storeSettings, key } from '@/store'
 
+// Save settings to localstorage every time there is a mutation
+storeSettings.subscribe((_, state) => {
+  localStorage.setItem('timeAsButton', JSON.stringify(state.timeAsButton))
+})
+
 createApp(App).use(storeSettings, key).mount('#app')

src/store/index.ts

@@ -9,9 +9,16 @@ export const key: InjectionKey<Store<State>> = Symbol()
 
 export const storeSettings = createStore<State>({
   state: {
-    timeAsButton: false
+    timeAsButton: true
   },
   mutations: {
+    init(state) {
+      if (localStorage.getItem('timeAsButton')) {
+        state.timeAsButton = JSON.parse(localStorage.timeAsButton)
+      } else {
+        state.timeAsButton = true
+      }
+    },
     timeAsButtonToggle(state) {
       state.timeAsButton = !state.timeAsButton
     }