Use vueuse useStorage instead of manually using localStorage

web/src/App.vue

@@ -2,7 +2,6 @@
 import { mapState } from "pinia";
 import { defineComponent } from "vue";
 import { useBudgetsStore } from "./stores/budget";
-import { useAccountStore } from "./stores/budget-account";
 import { useSessionStore } from "./stores/session";
 import { useSettingsStore } from "./stores/settings";
 
@@ -15,7 +14,7 @@ export default defineComponent({
     methods: {
         logout() {
             useSessionStore().logout();
-            this.$router.push("/login")
+            this.$router.push("/login");
         },
         toggleMenu() {
             useSettingsStore().toggleMenu();
@@ -24,40 +23,6 @@ export default defineComponent({
             useSettingsStore().toggleMenuSize();
         }
     },
-    beforeCreate() {
-        useSessionStore().restoreFromLocalStorage();
-        
-        
-        /*
-        const store = localStorage.getItem("session");
-        if (!store)
-            return;
-
-        const restoredState = JSON.parse(store);
-        if (!restoredState)
-            return;
-
-console.log("session", restoredState)
-        const sessionStore = useSessionStore();
-        sessionStore.User = restoredState.Session.User;
-        sessionStore.Token = restoredState.Session.Token;
-        for (const budget of restoredState.Budgets || []) {
-            sessionStore.Budgets.set(budget[0], budget[1]);
-        }
-
-        const budgetsStore = useBudgetsStore();
-        budgetsStore.CurrentBudgetID = restoredState.CurrentBudgetID;
-
-        const accountStore = useAccountStore();
-        accountStore.CurrentAccountID = restoredState.CurrentAccountID;
-        for (const account of restoredState.Accounts || []) {
-            accountStore.Accounts.set(account[0], account[1]);
-        }
-
-        const settingsStore = useSettingsStore();
-        settingsStore.ShowMenu = restoredState.ShowMenu;
-        settingsStore.ExpandMenu = restoredState.ExpandMenu;*/
-    }
 })
 </script>
 

web/src/main.ts

@@ -4,8 +4,6 @@ import './index.css'
 import router from './router'
 import { createPinia, SubscriptionCallbackMutation } from 'pinia'
 import { useBudgetsStore } from './stores/budget';
-import { useSessionStore } from './stores/session';
-import { useSettingsStore } from './stores/settings';
 import { useAccountStore } from './stores/budget-account'
 import PiniaLogger from './pinia-logger'
 
@@ -24,13 +22,4 @@ router.beforeEach(async (to, from, next) => {
   const accountStore = useAccountStore();
   await accountStore.SetCurrentAccount((<string>to.params.budgetid), (<string>to.params.accountid));
   next();
-})
-
-function saveStateToLocalStorage(mutation : SubscriptionCallbackMutation<any>, state : any) {
-  localStorage.setItem(mutation.storeId, JSON.stringify(state));
-  console.log("saving to local storage", mutation)
-}
-
-useSettingsStore().$subscribe(saveStateToLocalStorage);
-useBudgetsStore().$subscribe(saveStateToLocalStorage);
-useSessionStore().$subscribe(saveStateToLocalStorage);
+})

web/src/stores/budget.ts

@@ -1,3 +1,4 @@
+import { useStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 import { useAPI } from "./api";
 import { useAccountStore } from "./budget-account";
@@ -8,7 +9,7 @@ interface State {
 }
 
 export const useBudgetsStore = defineStore('budget', {
-    state: (): State => ({
+    state: () => useStorage<State>('budget', {
         CurrentBudgetID: null,
     }),
     getters: {

web/src/stores/session.ts

@@ -1,3 +1,4 @@
+import { useStorage } from '@vueuse/core';
 import { defineStore } from 'pinia'
 import { useAPI } from './api';
 
@@ -14,8 +15,7 @@ export interface Budget {
 }
 
 export const useSessionStore = defineStore('session', {
-    // convert to a function
-    state: (): State => ({
+    state: () => useStorage<State>('session', {
         Token: null,
         User: null,
         Budgets: new Map<string, Budget>(),
@@ -49,10 +49,5 @@ export const useSessionStore = defineStore('session', {
         logout() {
             this.$reset()
         },
-        restoreFromLocalStorage() {
-            const json = localStorage.getItem("session");
-            const value = JSON.parse(json || "{}");
-            Object.assign(this, value);
-        }
     }
 })

web/src/stores/settings.ts

@@ -1,13 +1,14 @@
+import { useStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 
 interface State {
-    ShowMenu?: boolean,
-    ExpandMenu?: boolean,
+    ShowMenu: boolean | null,
+    ExpandMenu: boolean,
 }
 
 export const useSettingsStore = defineStore('settings', {
-    state: (): State => ({
-        ShowMenu: undefined,
+    state: () => useStorage<State>('settings', {
+        ShowMenu: null,
         ExpandMenu: false,
     }),
     actions: {