Use vueuse useStorage instead of manually using localStorage

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: {